可否帮我看看轮播出现了什么问题？

Question

可否帮我看看轮播出现了什么问题？

MiIIer

19442866

发布于
2016-07-08

仿照slide.js的传送带效果，最后效果在下面网站有：

http://yoo.bilibili.com/html/blog/index.htm

自己尝试实现同样效果，可是出现了定时器不受控制的情况，附上全部代码，望高手们能帮我看看哪里有问题？谢谢！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <script src="./js/jquery.min.js"></script>
    <style>
        *{margin:0;padding:0;}
        *:before,*:after{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box}
        .listBox:before,.listBox:after{content: "";display: table}
        .listBox:after{clear:both;}
        .carouselBox{width: 100%;height: 360px;overflow: hidden;position: relative;}
        .clickSpace{width: 1000px;height:100%;margin: auto}
        .maskLeft,.maskRight{height: 100%;width: 50%;position: absolute;top: 0;background: (255,255,255,.3);z-index: 2;opacity: 0;transition:opacity 0.3s ease 0s;}
        .maskLeft:hover,.maskRight:hover{opacity: 1}
        .maskLeft{left:-500px;}
        .maskRight{right:-500px;}
        .carousel{width: 100%;height:100%;}
        .listBox{min-width:20000px;height: 100%;margin-left: -200%;transition: transform 500ms ease 0s;background: rgba(1,1,1,.5);
            -webkit-transform:translate(0,0);
            -moz-transform:translate(0,0);
            -ms-transform:translate(0,0);
            -o-transform:translate(0,0);
            transform:translate(0,0);
        }
        .item{
            float: left;width: 1000px;height: 100%;
        }
        .item:not(.active){
            filter: url(blur.svg#blur);
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -ms-filter: blur(5px);
            filter: blur(5px);
            filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false);
        }
        .playBox{width:100%;height: 100%;position: relative;}
        .playPrev,.playNext{width: 80px;height: 80px;background: rgba(0,0,0,0.3);position: absolute;top: 50%;transform: translateY(-50%);}
        .playPrev{right: 0;}
        .playNext{left: 0;}
        .active{}
        @media screen and (min-width: 1200px) {
            .carouselBox{}
        }
    </style>
</head>
<body>
    <div class="carouselBox">
        <div class="maskLeft">
            <div class="playBox">
                <div class="playPrev"></div>
            </div>
        </div>
        <div class="maskRight">
            <div class="playBox">
                <div class="playNext"></div>
            </div>
        </div>
        <div class="carousel">
            <div class="clickSpace">
                <div class="listBox">
                    <div class="item meishi"><img src="http://i0.hdslb.com/group1/M00/5E/EB/oYYBAFbVcv6AGEw7AARD8EguBSQ058.jpg" alt="" height="100%" ></div>
                    <div class="item qingyin"><img src="http://i0.hdslb.com/group1/M00/F6/AC/oYYBAFbFu42AEseIAAJcNXX3yD0807.jpg" alt="" height="100%" ></div>
                    <div class="item active guanlan"><img src="http://i0.hdslb.com/group1/M00/B7/0C/oYYBAFcHXSmAKAldAAKR0TIwTC0951.jpg" alt="" height="100%" ></div>
                    <div class="item shangyin"><img src="http://i0.hdslb.com/group1/M00/B7/09/oYYBAFcEvVaAbb61AAMCrHIU_DQ326.jpg" alt="" height="100%" ></div>
                     <div class="item ribenjie"><img src="http://i0.hdslb.com/group1/M00/69/14/oYYBAFbX46mAeL56AARNsz2Jhs8026.jpg" alt="" height="100%" ></div>
                    <div class="item meishi"><img src="http://i0.hdslb.com/group1/M00/5E/EB/oYYBAFbVcv6AGEw7AARD8EguBSQ058.jpg" alt="" height="100%" ></div>
                    <div class="item qingyin"><img src="http://i0.hdslb.com/group1/M00/F6/AC/oYYBAFbFu42AEseIAAJcNXX3yD0807.jpg" alt="" height="100%" ></div>
                    <div class="item guanlan"><img src="http://i0.hdslb.com/group1/M00/B7/0C/oYYBAFcHXSmAKAldAAKR0TIwTC0951.jpg" alt="" height="100%" ></div>
                    <div class="item shangyin"><img src="http://i0.hdslb.com/group1/M00/B7/09/oYYBAFcEvVaAbb61AAMCrHIU_DQ326.jpg" alt="" height="100%" ></div>
                     <div class="item ribenjie"><img src="http://i0.hdslb.com/group1/M00/69/14/oYYBAFbX46mAeL56AARNsz2Jhs8026.jpg" alt="" height="100%" ></div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>

   var carouselData=[
    {"src":"http://i0.hdslb.com/group1/M00/B7/0C/oYYBAFcHXSmAKAldAAKR0TIwTC0951.jpg"},
    {"src":"http://i0.hdslb.com/group1/M00/B7/09/oYYBAFcEvVaAbb61AAMCrHIU_DQ326.jpg"},
    {"src":"http://i0.hdslb.com/group1/M00/69/14/oYYBAFbX46mAeL56AARNsz2Jhs8026.jpg"},
    {"src":"http://i0.hdslb.com/group1/M00/5E/EB/oYYBAFbVcv6AGEw7AARD8EguBSQ058.jpg"},
    {"src":"http://i0.hdslb.com/group1/M00/F6/AC/oYYBAFbFu42AEseIAAJcNXX3yD0807.jpg"}
    ];
    var listBox=$('.carousel .listBox');
    var items=$('.carousel .item');
    var index = 1;
    var loop = setInterval(function(){playNext(callbackN)},1000);
    var itemNum=carouselData.length;
    var transitioned=true;
    // $(function(){
    //         var item = $('<div class="item"><img src="" alt="" height="100%"></div>');
    //         for( var i = 0;i<2*itemNum;i++){
    //             $('.listBox').append($('<div class="item"><img src="" alt="" height="100%"></div>'));
    //             if(i<itemNum){$('.listBox .item').eq(i).attr('src',carouselData[i].src);}
    //             else{$('.listBox .item').eq(i).attr('src',carouselData[i-itemNum].src);}
    //         }
    // })   
$('.carousel .listBox').on('transitionend',function(){
        transitioned=true;
        })
  function callbackN(){
            var delay=setTimeout(function(){
           if(transitioned){
             if(index==itemNum+1){
            index=1;
            $('.carousel .listBox').css({transition:'transform 1ms ease 0s',transform:'translate3d(0px,0px,0px)'});
            $('.carousel .item.active').removeClass('active').siblings($('.carousel .item')).eq(2).addClass('active')
        }      
        $('.playPrev').on('click',function(){clearInterval(loop);playPrev(callbackP)});
        $('.playNext').on('click',function(){clearInterval(loop);playNext(callbackN)});  
        loop=setInterval(function(){playNext(callbackN)},1000);
           }
    },501);            
  }
  function playNext(callback){
    
    if(index<=itemNum)
        {   
            $('.carousel .listBox').css('transition','transform 500ms ease 0s');
            $('.carousel .item.active').removeClass('active').next($('carousel .item')).addClass('active');
            index++;}
            var transformArray= $('.carousel .listBox').css('transform'),
                translateArray=transformArray.split(','),
                translate=parseInt(translateArray[4]); 
            console.log(index,translate);  
            $('.carousel .listBox').css('transform','translate3d(' + (translate - 1000) + 'px, 0px, 0px)');
            callback()
}
  function callbackP(){
            var delay=setTimeout(function(){
            if(index==0)
            {
                index=5;
                $('.carousel .listBox').css({transition:'transform 0s ease 0s',transform:'translate3d(-4000px,0px,0px)'});
                $('.carousel .item.active').removeClass('active').siblings($('.carousel .item')).eq(5).addClass('active');
            }
        $('.playPrev').on('click',function(){clearInterval(loop);playPrev(callbackP)});
        $('.playNext').on('click',function(){clearInterval(loop);playNext(callbackN)});  
        loop=setInterval(function(){playNext(callbackN)},1000);
        },501);
  }

  function playPrev(callback){

       if(index>=1)
      {   $('.carousel .listBox').css('transition','transform 500ms ease 0s'); 
          $('.carousel .item.active').removeClass('active').prev($('carousel .item')).addClass('active');
           var transformArray= $('.carousel .listBox').css('transform'),
                  translateArray=transformArray.split(','),
                  translate=parseInt(translateArray[4]); 
              console.log(index,translate);  
          $('.carousel .listBox').css('transform','translate3d(' + (translate+1000) + 'px, 0px, 0px)');
          index--}
          callback()
  }
    $('.playNext').on('click',function(){
        $('.playPrev').off('click');
        $('.playNext').off('click');
        clearInterval(loop);
        playNext(callbackN);
        
    })
    $('.playPrev').on('click',function(){
        $('.playPrev').off('click');
        $('.playNext').off('click');
        clearInterval(loop);
        playPrev(callbackP);
        
    })

</script> 
</html>

javascript html css

阅读 2.3k

1 个回答

得票最新

jinghp

1252

发布于
2016-07-08

function callbackN(){

        var delay=setTimeout(function(){
       if(transitioned){
         if(index==itemNum+1){
        index=1;
        $('.carousel .listBox').css({transition:'transform 1ms ease 0s',transform:'translate3d(0px,0px,0px)'});
        $('.carousel .item.active').removeClass('active').siblings($('.carousel .item')).eq(2).addClass('active')
    }      
   // $('.playPrev').on('click',function(){clearInterval(loop);playPrev(callbackP)});
   // $('.playNext').on('click',function(){clearInterval(loop);playNext(callbackN)});  
   //loop=setInterval(function(){playNext(callbackN)},1000);
       }
},501);

}
function playNext(callback){


if(index<=itemNum)
    {   
        $('.carousel .listBox').css('transition','transform 500ms ease 0s');
        $('.carousel .item.active').removeClass('active').next($('carousel .item')).addClass('active');
        index++;}
        var transformArray= $('.carousel .listBox').css('transform'),
            translateArray=transformArray.split(','),
            translate=parseInt(translateArray[4]); 
        console.log(index,translate);  
        $('.carousel .listBox').css('transform','translate3d(' + (translate - 1000) + 'px, 0px, 0px)');
        callback()

}
function callbackP(){

        var delay=setTimeout(function(){
        if(index==0)
        {
            index=5;
            $('.carousel .listBox').css({transition:'transform 0s ease 0s',transform:'translate3d(-4000px,0px,0px)'});
            $('.carousel .item.active').removeClass('active').siblings($('.carousel .item')).eq(5).addClass('active');
        }
  //  $('.playPrev').on('click',function(){clearInterval(loop);playPrev(callbackP)});
   // $('.playNext').on('click',function(){clearInterval(loop);playNext(callbackN)});  
  //loop=setInterval(function(){playNext(callbackN)},1000);
    },501);

}

function playPrev(callback){

      
   if(index>=1)
  {   $('.carousel .listBox').css('transition','transform 500ms ease 0s'); 
      $('.carousel .item.active').removeClass('active').prev($('carousel .item')).addClass('active');
       var transformArray= $('.carousel .listBox').css('transform'),
              translateArray=transformArray.split(','),
              translate=parseInt(translateArray[4]); 
          console.log(index,translate);  
      $('.carousel .listBox').css('transform','translate3d(' + (translate+1000) + 'px, 0px, 0px)');
      index--}
      callback()

}

$('.playNext').off().on('click',function(){
   // $('.playPrev').off('click');
  //  $('.playNext').off('click');
    clearInterval(loop);
    playNext(callbackN);
    loop=setInterval(function(){playNext(callbackN)},1000);
    
})
$('.playPrev').off().on('click',function(){
    //$('.playPrev').off('click');
   // $('.playNext').off('click');
    clearInterval(loop);
    playPrev(callbackP);
    loop=setInterval(function(){playNext(callbackN)},1000);
})

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

可否帮我看看轮播出现了什么问题？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？