每次移一張圖片的無縫輪播圖
阿新 • • 發佈：2018-09-08
end 3.0 doctype () 定時 ora title order console
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>my動畫輪播圖</title> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <style> *{ list-style: none; margin: 0px; padding: 0px; } .carousel{ width: 530px; height: 280px; overflow: hidden; position: relative; } .carousel .imgList{ width: 9999px; position: absolute; } .carousel .imgList>li{ float: left; } .carousel .imgList>li>img{ width: 530px; } .carousel span{ display: inline-block; width: 30px; height: 56px; background: rgba(255, 255, 255, 0.5); position: absolute; top: 50%; transform:translate(0,-50%); cursor: pointer; } .carousel span:hover{ background: red; } .carousel .left{left: 20px;} .carousel .right{right:20px;} .carousel .numList{ position: absolute; bottom: 20px; left: 50%; transform: translate(-50%,0); background: rgba(255,255,255,0.1); border-radius: 10px; cursor: pointer; } .carousel .numList li{ float: left; width: 20px; height: 20px; border-radius: 20px; text-align: center; margin-right: 10px; background: rgba(255,255,255,0.8); } .carousel .numList li.current{ background: orange; } </style> </head> <body> <div class="carousel"> <ul class="imgList"> <li><img src="images/one.jpg" >1</li> <li><img src="images/two.jpg" >2</li> <li><img src="images/three.jpg" >3</li> <li><img src="images/four.jpg" >4</li> <li><img src="images/five.jpg" >5</li> <li><img src="images/six.jpg" >6</li> </ul> <ol class="numList"> </ol> <span class="left">1</span> <span class="right">2</span> </div> <input type="text"> </body> </html> <script> $(function(){ var imgListLength=$(‘.imgList>li>img‘).length; var imgListItemWidth=$(‘.imgList>li‘).width() var imgListWidth=$(‘.imgList>li>img‘).width()*imgListLength; var $firstImg = $(‘.imgList>li‘).eq(0).clone(); $(‘.imgList‘).append($firstImg); var time; var num=0; var temporaryNum=0; // 根據圖片張數，添加小圓。 for(var i=0;i<imgListLength;i++){ $(‘.numList‘).append(‘<li>‘+(i+1)+‘</li>‘); } $(‘.numList>li‘).eq(0).addClass(‘current‘); var Fun={ /** *@method 移動圖片和當前圖片所在 *@data 2018-09-08 *@param {number} moveNum 需要移動的索引 *@param {number} currentNum 相讓用戶看到當前圖片所在的索引 */ moveImg:function(moveNum,currentNum){ console.log(moveNum,currentNum); $(‘.carousel .imgList‘).animate({‘left‘:‘-‘+moveNum*imgListItemWidth+‘px‘}); $(‘.carousel .numList>li‘).eq(currentNum).addClass(‘current‘).siblings().removeClass(‘current‘); } } // 定時器 var autoCarousel = function(){ time=setInterval(function(){ num++; temporaryNum++; if(temporaryNum >= imgListLength){ temporaryNum=0; } if(num>imgListLength){ num = 0; $(‘.carousel .imgList‘).css({‘left‘:‘-‘+num*imgListItemWidth+‘px‘}); num = 1; } Fun.moveImg(num,temporaryNum) },1000) } autoCarousel() $(‘body‘).on(‘mouseenter‘,‘.carousel‘,function(){ clearInterval(time); }) $(‘body‘).on(‘mouseleave‘,‘.carousel‘,function(){ autoCarousel(); }) $(‘.carousel‘).on(‘click‘,‘.numList>li‘,function(){ var currentIndex = $(this).index(); num=currentIndex; Fun.moveImg(num,num); }) $(‘.carousel‘).on(‘click‘,‘.right‘,function(){ num++; temporaryNum = num; if(temporaryNum==imgListLength){ temporaryNum = 0; } if(num>imgListLength){ num=0; $(‘.carousel .imgList‘).css({‘left‘:‘-‘+num*imgListItemWidth+‘px‘}); num=1; temporaryNum = 1; } Fun.moveImg(num,temporaryNum); }) $(‘.carousel‘).on(‘click‘,‘.left‘,function(){ num--; temporaryNum = num; if(num < 0){ temporaryNum = imgListLength-1; num = imgListLength; $(‘.carousel .imgList‘).css({‘left‘:‘-‘+num*imgListItemWidth+‘px‘}); num = imgListLength-1; } Fun.moveImg(num,num); }) }); </script> <!-- 索引0顯示的是第1張，以此類推，索引6就是第7張 第7張圖和第1張圖是一樣的。如果是索引7就用css({‘left‘,‘‘})移動到第2張圖，因為這樣就不會有移動的動畫 -->
每次移一張圖片的無縫輪播圖