使用jQuery的动画效果实现无缝轮播图
第一次写博客,刚学jQuery做了个小Demo,写的不好的地方和有待提高的地方请大家提出来,接下来我们进入正题
设计思路
使用ul列表对图片进行排序,对li元素设置CSS浮动样式,设置ul的宽度等于所有图片的总长度,使图片水平排列,然后我们可以通过在js中设置定时器setInterval() 来使图片每隔固定时间自动朝一个方向移动。其中使用jQ的 animate()动画方法,使其出现换页动画效果。实现无缝的思路就是在序列最后再放一张第1张的图片,在每次第5张切换到第6张的时候有个动画效果,然后立马切换到第1张,从而实现无缝连播。当然,用单纯用JS也能实现。
- HTML代码部分
<div id="show"> //图片显示的窗口
<ul id="show_Ulimg"> //排列的列表
<li><img src="img/01.png" alt="" /></li>
<li><img src="img/02.jpg" alt="" /></li>
<li><img src="img/03.jpg" alt="" /></li>
<li><img src="img/04.jpg" alt="" /></li>
<li><img src="img/05.png" alt="" /></li>
<li><img src="img/01.png" alt="" /></li> //在最后面插入第一张图片
</ul>
<ul id="show_Ulbtn"> //轮播图下方的页码显示圆圈按钮
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span id="l_btn"><</span> //左右按钮
<span id="r_btn">></span>
</div>
span标签可以换成button标签,我这里只是演示。
- CSS部分代码
<style>
*{
margin: 0;
padding: 0;
}
#show{
height: 300px;
width: 500px;
margin: 150px auto;
position: relative;
overflow: hidden;
}
#show #show_Ulimg{
list-style: none;
width: 3000px;
position: absolute;
}
#show #show_Ulimg li{
float: left;
}
#show #show_Ulimg li img{
height: 300px;
width: 500px;
}
#show #show_Ulbtn{
position: absolute;
background: rgba(0,0,0,.6);
bottom: 0;
left: 50%;
height: 22px;
width: 120px;
margin-left: -60px;
border-radius: 10px 10px 10px 10px;
margin-bottom: 10px;
}
#show #show_Ulbtn li{
float: left;
list-style: none;
height: 10px;
width: 10px;
border-radius: 50%;
border: 2px solid white;
margin: 4px 5px;
cursor: pointer;
}
#show #show_Ulbtn li:first-child{
background: white;
}
#show span{
position: absolute;
display: inline-block;
height: 50px;
width: 20px;
background: rgba(0,0,0,.6) ;
color: white;
text-align: center;
line-height: 50px;
top:50%;
margin-top: -25px;
cursor: pointer;
z-index: -1;
}
#show #l_btn{
left: 0;
border-radius: 0 15px 15px 0;
}
#show #r_btn{
right: 0;
border-radius: 15px 0 0 15px;
}
</style>
CSS的代码就不做解释了,主要是做的稍微美观一点
- JavaScript部分代码
<script>
var i = 0;
// 轮播方法
function times(){
i++; //i可以当作图片的页码 0是第一张
if(i==5){
$("#show_Ulbtn li").eq(0).css("background","white")
.siblings().css("background","transparent");
}
if(i==6){
$("#show_Ulimg").stop().css("left",0);
// 第6张切换成第一张再从第二张开始移
i=1;
$("#show_Ulimg").animate({left:-500},400);
}
$("#show_Ulimg").animate({left:-500*i},400);
// 下方点按钮 ,使用siblings()方法排他
$("#show_Ulbtn li").eq(i).css("background","white")
.siblings().css("background","transparent");
}
var timer = setInterval("times()",2000); //开启定时器
// 移入暂停
$("#show").hover(function(){
clearInterval(timer); //清除定时器
$("#l_btn").css("z-index","1"); //移入图片左右按钮显示
$("#r_btn").css("z-index","1");
},function(){
clearInterval(timer);
timer = setInterval("times()",2000);
$("#l_btn").css("z-index","-1"); //移出按钮消失
$("#r_btn").css("z-index","-1");
});
// 左按钮
$("#l_btn").click(function(){
i--;
if(i==-1){
$("#show_Ulimg").stop().css("left",-2500);
//在第一张图按左按键判断,将图片立马移动到第6张
i=4; //再将i设为4
$("#show_Ulimg").animate({left:-500*i},400);
//使第1张开始左移动到第5张
}
if(i==0){ //从后面调到第一张图判断
$("#show_Ulimg").animate({left:0},400);
$("#show_Ulbtn li").eq(0).css("background","white")
.siblings().css("background","transparent");
i=5;
// 瞬间移动到第6张
// $("#show_Ulimg").stop().css("left",-2500);
//阵列动画逐一运行,所以这里用css方法不行
$("#show_Ulimg").animate({left:-500*i},0);
}
$("#show_Ulimg").animate({left:-500*i},400);
$("#show_Ulbtn li").eq(i).css("background","white")
.siblings().css("background","transparent");
});
// 右按钮 判断方式与左按钮一样,不过相反
$("#r_btn").click(function(){
i++;
if(i==5){
$("#show_Ulbtn li").eq(0).css("background","white")
.siblings().css("background","transparent");
}
if(i==6){
$("#show_Ulimg").stop().css("left",0);
i=1;
$("#show_Ulimg").animate({left:-500*i},400);
}
$("#show_Ulimg").animate({left:-500*i},400);
$("#show_Ulbtn li").eq(i).css("background","white")
.siblings().css("background","transparent");
});
// 下方圆点按钮
$("#show_Ulbtn li").click(function(){
i = $(this).index(); //使i= li的索引值,使点击圆点切换至相应的图片
$("#show_Ulimg").animate({left:-500*i},400);
//排他,在点击的这个圆圈的同时将其他的圆圈变回原来的样子
$(this).css("background","white")
.siblings().css("background","transparent");
});
</script>
在整个js中,i就相当于图片的页码,对i进行操作就可以对图片进行切换,下方的移动点就自动跟着i走