JQuery实现图片轮播无缝滚动
图片轮播无缝滚动实例
实现效果展示预览:
思路:
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>
``
本文来自博客园,作者:望穿先生,转载请注明原文链接:https://www.cnblogs.com/wangchuanxiansheng/p/16420936.html