my動畫輪播圖

*{

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;

}

• 1
• 2
• 3
• 4
• 5
• 6

1

2

$(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

$(‘.numList‘).append(‘

‘+(i+1)+‘‘);

}

$(‘.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);

})

});

總結

以上是生活随笔為你收集整理的html小圆图堆叠轮播,每次移一张图片的无缝轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。