图片轮播无缝滚动实例
实现效果展示预览：
思路：
1.设置当前索引curIndex,和前一张索引prevIndex。(curIndex为下一次要显示的图片索引，prevIndex为现在看见的图片)
2.点击下一张按钮，图片向左移动；点击前一张按钮，图片向右移动
3.滑动前将要滑入的图片放指定位置，现在的照片prevIndex划走，要滑入的照片curIndex进入
css样式
<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，没在执行动画返回falseif ($(".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>``
