实现一个轮播图的功能
- 图片数量及URL均在HTML中写好
- 可以配置轮播的顺序(正序、逆序)、是否循环、间隔时长
- 图片切换的动画流畅
- 在轮播图下方自动生成对应图片的小点,点击小点,轮播图自动动画切换到对应的图片
大致思路:
将图片设为向左浮动,再通过jQuery中animate函数,左右滑动显示图片,使用setInterval()定时函数控制循环,间隔时长
思路实现:
https://jsfiddle.net/donqi/df3dzsme/
html结构:
<div class="showbox">
<div class="imagebox"> //放置图片
<img src="image/1.jpg" alt="1.jpg">
<img src="image/2.jpg" alt="2.jpg">
<img src="image/3.jpg" alt="3.jpg">
<img src="image/4.jpg" alt="4.jpg">
</div>
<div class="icobox"> //放置图标
<pan rel="0" class="active">0</span>
<span rel="1">1</span>
<span rel="2">2</span>
<span rel="3">3</span>
</div>
</div>
css:
.showbox{
position: relative;
height: 300px;
width: 570px;
overflow: hidden;
border: 10px solid #eee;
background-color: #eee;
border-radius: 10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.imagebox{
position: relative;
height: 270px;
width: 570px;
top: 0;
left: 5px;
overflow: hidden;
}
.imagebox img{
display: block;
width: 570px;
height: 270px;
float: left;
}
.icobox{
position: absolute;
border: none;
width: 120px;
height: 12px;
left: 220px;
bottom: 10px;
text-align: center;
line-height: 40px;
overflow: hidden;
}
.icobox span{
background: url("../image/ico.png") 0px 0px no-repeat;
width: 12px;
height: 12px;
cursor: pointer;
float: left;
margin-left: 3px;
}
.icobox span.active{
background: url("../image/ico.png") 0px -12px no-repeat;
cursor: default;
}
javascript:
$(document).ready(function() {
var imagebox=$(".showbox").children('.imagebox')[0],//获得图片容器
icobox=$(".showbox").children('.icobox')[0],//获得图标容器
ico=$(icobox).children('span'),//获得图标数组
imagenum=$(imagebox).children().size(),//获得图片数量
imageboxWidth=$(imagebox).width(),//获得图片容器的宽度
imagewidth=imageboxWidth*imagenum,//获得图片的总宽度
activeID = parseInt($($(icobox).children(".active")[0] ).attr("rel")),//获得激活的图标ID
nextID=0,//下一个图标的ID
intervalID,//setInterval()函数的ID
delaytime=4000,//延迟的时间
speed=700;//执行速度
$(imagebox).css({'width' : imagewidth + "px"});
var rotate=function(clickID) { //图片滑动函数
if (clickID+1){
nextID=clickID;
}else{
nextID=(activeID+1)%4;
};
$(ico[activeID]).removeClass('active');
$(ico[nextID]).addClass('active');
$(imagebox).animate({left:"-"+nextID*imageboxWidth+"px"}, speed);//jQuery中的animate函数
activeID=nextID;
}
intervalID=setInterval(rotate,delaytime);//循环函数
$.each(ico, function(index, val) {
$(this).click(function(event) {
clearInterval(intervalID);//清楚之前的定时任务
var clickID = index;
rotate(clickID);//运行一次带参数的rotate函数
intervalID = setInterval(rotate,delaytime);
});
});
});
注意:
- 给容器设置overflow:hidden十分重要
- 点击小圆点时,一定要清除上一次的定时器,重新开始定时器时,要给intervalID重新赋值
- imagebox的宽度要和image的宽度相等,否则循环显示时,就会出现box中有一大一小两张图片
待改进:
从最后一张图片到第一张图片时,要经历中间所有的图片,若能实现单向循环,最后一张图片右滑到第一张图片。
改进
将第一张图片用animate将其宽度变为0,放到最后img列表的最后一位,这样能保证是一个方向,不过图片宽度是缩减为0,看起来效果也不是很好
代码改动如下:
setInterval(function(){
$('.imagebox').append($('.imagebox img').first());
$('.imagebox img').last().css({'width' : "570px"});
$('.imagebox img').first().animate({'width':'0px'},1000);
},3000)
简单demo如下:
https://jsfiddle.net/donqi/20yxy062/1/embedded/
说明
用上面这种办法横向滚动效果不太好,但是纵向效果挺好,下面是纵向滚动的demo:
https://jsfiddle.net/donqi/87qqjm4z/
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。