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>
``

标签：JQuery,box,轮播,img,prevIndex,curIndex,无缝,eq,left
来源： https://www.cnblogs.com/wangchuanxiansheng/p/16420936.html