轮播图

<!-- <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是轮播图,不懂得可以问
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值