本人最近在制作的项目中美工美眉给了我一个轮播的效果图,诚然网上有很多类似的代码插件,但是不是样式太难修改,就是逻辑有些复杂,于是我在结合别人博客的基础上,自己整了一套较为简易的开发教程,主要是与众位分享一下我的思路。
- html部分
<div class="zong">
<div class="zong_zi">
<div class="pic"><img src="images/1.jpg">1</div>
<div class="pic"><img src="images/2.jpg">2</div>
<div class="pic"><img src="images/3.jpg">3</div>
<div class="pic"><img src="images/4.jpg">4</div>
<div class="pic"><img src="images/5.jpg">5</div>
</div>
<a href="###" id="prev">上一页</a> <a href="###" id="next">下一页</a>
</div>
html部分的内容结构简单明了,只用一个大的div包住内部用一个小的div里边依次放入class为.pic
的div若干这是轮播图片或文字的主要放置地。
- css部分
.zong{ width:500px; height:430px; margin:20px auto;}
.zong_zi{ width:500px; height:340px; margin:0; overflow:hidden;}
.pic{ width:500px; height:340px;}
.pic img{ width:500px; height:300px;}
也很简单自己看,我不解释了。
- 接下来是javascript部分
$(function(){
//获取部分内容
var $piclen=$('.pic').length;
var index=0;
var ti=null;
//执行函数
move();
//鼠标移入暂停效果移除继续
$('.zong_zi').hover(function(){
clearInterval(ti);
},function(){
move();
})
//上一页
$('#prev').click(function(){
clearInterval(ti);
if(index==0){index=$piclen;}
index--;
$('.pic').eq(index-1).fadeIn(500).siblings('.pic').fadeOut(500);
move();
})
//下一页
$('#next').click(function(){
clearInterval(ti);
$('.pic').eq(index).fadeIn(500).siblings('.pic').fadeOut(500);
index++;
if(index==$piclen){index=0;}
move();
})
//轮播效果
function move(){
ti=setInterval(function(){
$('.pic').eq(index).fadeIn(500).siblings('.pic').fadeOut(500);
index++;
if(index==$piclen){index=0;}
},4000);
}
}
move()函数利用定时器实现轮播效果,在实现依次渐隐渐现后给index
索引值加1判断直到数字与.pic的数量相同清零循环,点击下一页思路与轮播思路相同,只是此时一开始需要清楚ti,后面的上一页也是这个思路,但是再在点击 上一页时需要注意的是此时与下一页的逻辑正好相反,因此要先判断,再自减,同事因为要显示的是当前index
索引前一项的内容,所以index处的索引要减去1,即index-1