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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库