JQuery实现图片轮播无缝滚动
2024-10-20 14:00:25
图片轮播无缝滚动实例
实现效果展示预览：
思路：
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>
``最新文章
- android 图片缓存
- memcached服务器
- server与Portal联合，portal许可过期无法登录。
- 一般处理程序获取WEB窗体创建的验证码需要实现session相关接口
- Java 工具集
- 【Xamarin报错】visual studio android 模拟器部署卡住
- 行规——::GetDC()和::ReleaseDC()配对
- 【转】win7与VMware ubuntu虚拟机实现文件共享（最后一定要装open-vm-dkms插件）
- linux内核学习-
- bzoj2789
- 1TB到底能存放多少东西？
- Using Ninject in a Web Application
- yarn出现“There are no scenarios ; must have at least one"
- zookeeper集群迁移方案
- [CF963E]Circles of Waiting[高斯消元网格图优化+期望]
- Windows Server2008安装mysql5.6出现程序无法正常启动（0xc000007b）
- 深入研究java.lang.Process类
- RPC简介与hdfs读过程与写过程简介
- t-sql的一些经验
- 支付宝在ios应用上的开发［转］