*{
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);
})
});
