很简单的一个例子，总共不到50行代码，只是自己在做项目的时候通过一次又一次的修改优化和填坑，发现还是有很多容易忽略之处，于是便想着分享出来。
首先，根据banner图数量，动态显示分页器的数量，这里万不可写死，否则重复利用率将会极低
var index = 0;
var imgLen = $(".banner-ul > li").length;
$(".banner-ul > li:eq(0)").show()
for(var i = 0;i < imgLen; i++){
$(".banner-dot").append("<span></span>"); //根据轮播图片的数量自动显示分页器数量
$(".banner-dot > span").eq(0).addClass("actived");
}
其次，有些时候会出现只有一张banner图的情况，这种情况下我们就让图片静止没有任何动态效果
if(imgLen > 1){ //当轮播图片数大于1的时候，才显示轮播
//todo
} else{
$(".banner-dot,.arrow-btn").hide(); //只有1副的时候不显示左右箭头和分页器，不作轮播动画
}
主体部分功能实现：
1、根据banner图的index值得来封装一个公共的轮播效果，接下来所有功能都是要调用这个函数
var selectImg = function(index){
$(".banner-ul > li").eq(index).fadeIn(1000).siblings().fadeOut(1000);
$(".banner-dot > span").eq(index).addClass("actived").siblings().removeClass("actived");
}
2、分页器点击效果，把每个分页器的index值（即$(this).index()）赋给参数index
$(".banner-dot > span").click(function(){
index = $(this).index()
selectImg(index)
});
3、左右箭头的点击切换效果，区别在于，分别为index++和index--
var transformRight = function(){
if(index === imgLen - 1){
index = 0;
} else{
index++;
}
selectImg(index);
};
var transformLeft = function(){
if(index === 0){
index = imgLen - 1;
} else{
index--;
}
selectImg(index);
}
$(".index-banner").children(".right").click(function(){
transformRight();
});
$(".index-banner").children(".left").click(function(){
transformLeft();
});
4、最后一步，可根据需要实现自动播放，播放的函数为transformRight()，即向右点击播放效果
var timer = setInterval(transformRight,5000);
$(".index-banner").mouseover(function(){
clearInterval(timer)
}).mouseout(function(){
timer = setInterval(transformRight,5000);
});
这样，一个最简单的轮播图播放效果就做好了
html和css中没有需要特别注意的，只需将每个图片设为隐藏，然后再html中显示第一张图片即可
.banner-ul > li{
height: 500px;
width: 100%;
position: absolute;
overflow: hidden;
background-repeat: no-repeat;
background-position: center;
background-size: auto 100%;
display: none;
}
网友评论