轮播图 | 易学教程

Document

<!-- <div class="wraper">
   <div class="score">
       <img src="五角星(1).png" alt="">
       <img src="五角星(1).png" alt="">
       <img src="五角星(1).png" alt="">
       <img src="五角星(1).png" alt="">
       <img src="五角星(1).png" alt="">
   </div>
   <span>王高贤</span>

-->

    <div id="pre">
        <</div> <div id="next">>
    </div>
</div>
<script>
//   var imgs=document.getElementsByTagName('img');
//   var span=document.getElementsByTagName('span')[0];
//   for(var i=0;i<imgs.length;i++){
//       imgs[i].i=i;
//       imgs[i].onclick=function(){
//           for(var n=0;n<imgs.length;n++){
//             imgs[n].src='五角星(1).png';
//           }
//           var index=this.i;
//           for(var j=index;j>=0;j--){
//               imgs[j].src='五角星.png';
//           }
//           switch(index){
//              case 0:
//              span.innerHTML='谢天';
//              break;
//              case 1:
//              span.innerHTML='朱成';
//              break;
//              case 2:
//              span.innerHTML='陈龙玉';
//              break;
//              case 3:
//              span.innerHTML='董志萌';
//              break;
//              case 4:
//              span.innerHTML='王富贵';
//              break;
//              default:
//              span.innerHtml='谢天';
//           }
//       }
//   }
</script>
<script>
    var pre = document.getElementById('pre');
    var next = document.getElementById('next');
    var imgs = document.querySelectorAll('.warper>img');
    var span = document.getElementsByTagName('span');
    var count = 0;
    next.onclick = function () {
        ++count;
        // for (var i = 0; i < imgs.length; i++) {
        //     imgs[i].className = ''
        //     span[i].className = '';
        // }
        clearStyle(imgs,span);
        count = count == 4 ? 0 : count;
        imgs[count].className = 'active';
        span[count].className = 'active_circle';
    }

    pre.onclick = function () {
        // for (var i = 0; i < imgs.length; i++) {
        //     imgs[i].className = '';
        //     span[i].className = '';
        // }
        clearStyle(imgs,span);
        count = count == 0 ? 4 : count;
        --count;
        imgs[count].className = 'active';
        span[count].className = 'active_circle';
    }

    for (var i = 0; i < span.length; i++) {
        span[i].i = i;
        span[i].onclick = function () {
            // for (var j = 0; j < span.length; j++) {
            //     span[j].className = '';
            //     imgs[j].className = '';
            // }
            clearStyle(imgs,span);
            var index = this.i;
            count=index
            this.className = 'active_circle';
            imgs[index].className = 'active';
        }
    }
    function clearStyle(arr1,arr2){
        for(var i=0;i<arr1.length;i++){
            arr1[i].className='';
            span[i].className='';
        }
    }
   第一个JS是评分的
   第二个JS是轮播图，不懂得可以问

来源：CSDN

作者：yp2294188167

链接：https://blog.csdn.net/yp2294188167/article/details/103493321

标签

var

轮播