标签：JQuery box 轮播 img prevIndex curIndex 无缝 eq left
图片轮播无缝滚动实例
实现效果展示预览：
思路：
1.设置当前索引curIndex,和前一张索引prevIndex。(curIndex为下一次要显示的图片索引，prevIndex为现在看见的图片)
2.点击下一张按钮，图片向左移动；点击前一张按钮，图片向右移动
3.滑动前将要滑入的图片放指定位置，现在的照片prevIndex划走，要滑入的照片curIndex进入
style样式
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
height: 550px;
border: 1px solid #000;
margin: 50px auto;
position: relative;
overflow: hidden;
}
li {
list-style: none;
}
.imgList {
width: 800px;
height: 550px;
position: relative;
overflow: hidden;
}
.imgList li {
position: absolute;
left: 800px;
}
.box img {
width: 800px;
height: 550px;
position: absolute;
left: 800px;
}
.btn {
font-size: 40px;
color: #fff;
width: 50px;
height: 80px;
box-shadow: 0 0 18px #fff;
position: absolute;
top: 230px;
text-align: center;
line-height: 80px;
border-radius: 50%;
cursor: pointer;
}
#prev {
left: 50px;
}
#next {
right: 50px;
}
.nav {
height: 50px;
text-align: center;
position: absolute;
width: 100%;
bottom: 30px;
}
.nav li {
display: inline-block;
width: 30px;
height: 30px;
background: #ccc;
}
.nav .on {
background: #333;
}
</style>
html主体部分
<div class="box">
<img style="left: 0px;" src="./img/images/show/9/1.jpg" />
<img src="./img/images/show/9/2.jpg"/>
<img src="./img/images/show/9/3.jpg" />
<img src="./img/images/show/9/4.jpg" />
<img src="./img/images/show/9/5.jpg" />
<div id="prev" class="btn"><</div>
<div id="next" class="btn">></div>
<ul class="nav">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
js部分（使用Jquery实现）
<script src="js/jquery-1.11.3.js"></script>
<script>
var prevIndex = 0;
var curIndex = 0;
$("#next").click(function() {
//.is(":animated"):正在执行动画返回true，没在执行动画返回false
if ($(".box>img").eq(curIndex).is(":animated")) {
return;
}
if (curIndex >= $(".box>img").length - 1) {
curIndex = 0;
} else {
curIndex++
}
tab();
prevIndex = curIndex;
})
$("#prev").click(function() {
if ($(".box>img").eq(curIndex).is(":animated")) {
return;
}
if (curIndex <= 0) {
curIndex = $(".box>img").length - 1;
} else {
curIndex--;
}
tab();
prevIndex = curIndex;
})
$(".nav li").click(function() {
curIndex = $(this).index();
if (curIndex == prevIndex) {
return;
}
tab();
prevIndex = curIndex;
})
//左边按钮：向右边滑动；
function tab() {
//切大图；
if (curIndex == 0 && prevIndex == 4) {
//边界2，当前在最后一张，点击next
//向左滑动：前一张向左滑动，当前那一张摆放在右边，滑动到当前位置；
$(".box>img").eq(prevIndex).animate({
left: -800
}, 1000)
$(".box>img").eq(curIndex).css("left", "800px").animate({
left: 0
}, 1000)
} else if (prevIndex == 0 && curIndex == 4 ) {
//边界1，当前在第一张，点击prev
//向右滑动：前一张向右滑动，当前那一张摆放在左边，滑动到当前位置
$(".box>img").eq(prevIndex).animate({
left: 800
}, 1000)
$(".box>img").eq(curIndex).css("left", "-800px").animate({
left: 0
}, 1000)
} else if (curIndex > prevIndex) {
$(".box>img").eq(prevIndex).animate({
left: -800
}, 1000)
$(".box>img").eq(curIndex).css("left", "800px").animate({
left: 0
}, 1000)
} else {
$(".box>img").eq(prevIndex).animate({
left: 800
}, 1000)
$(".box>img").eq(curIndex).css("left", "-800px").animate({
left: 0
}, 1000)
}
//切小点；
$(".nav li").eq(curIndex).addClass("on").siblings().removeClass()
}
</script>
``标签：JQuery,box,轮播,img,prevIndex,curIndex,无缝,eq,left 来源： https://www.cnblogs.com/wangchuanxiansheng/p/16420936.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。