zepto.min.js的使用 移动端的轮播图

1.Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。
相关链接: http://www.css88.com/doc/zeptojs_api/
2.首先引入zepto文件

<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
<!-- <script src="./js/index.js"></script> -->
<!-- <script src="./zepto-master/src/zepto.min.js"></script>
<script src="./zepto-master/src/selector.js"></script>
<script src="./zepto-master/src/fx.js"></script>
<script src="./zepto-master/src/touch.js"></script> -->
<!-- zepto.min.js文件是以上几个文件的集合压缩版,需要自己手动压缩 -->
<script src="./zepto-master/src/zepto.min.js"></script>
<title>京东</title>

3.html结构代码

<!-- 轮播图banner部分 -->
		<div class="banner">
			<ul class="banner_ul">
				<li>
					<a href="javascript:">
						<img src="./uploads/l1.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="javascript:">
						<img src="./uploads/l2.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="javascript:">
						<img src="./uploads/l3.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="javascript:">
						<img src="./uploads/l4.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="javascript:">
						<img src="./uploads/l5.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="javascript:">
						<img src="./uploads/l6.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="javascript:">
						<img src="./uploads/l7.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="javascript:">
						<img src="./uploads/l8.jpg" alt="">
					</a>
				</li>
			</ul>
			<!-- 点标记 -->
			<ul class="banner_point">
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>

4.css样式

.banner {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.banner_ul {
	position: relative;
}
.banner_ul li {
	float: left;
}
.banner_ul li img {
	display: block;
	width: 100%;
}
.banner_point {
	width: 130px;
	height: 10px;
	position: absolute;
	left: 50%;
	bottom: 1px;
	transform: translate(-50%,0px);
}
.active {
	background-color: #fff;
}
.banner_point>li {
	width: 6px;
	height: 6px;
	border: 1px solid #fff;
	border-radius: 50%;
	float: left;
	margin-right: 10px;
}

5.js代码

	<script>
		$(function () {
			//获取盒子banner
			var banner = $(".banner");
			//获取第一个ul 装图片的
			var imgBox = banner.find("ul:first-of-type");
			//获取banner的宽度
			var bannerWidth = banner.width();
			//获取点标记
			var indatior = banner.find("ul:last-of-type").find("li");
			console.log(indatior);
			//获取ul中第一张图片
			var first = imgBox.find("li:first-of-type");
			//获取ul最后一张图片
			var last = imgBox.find("li:last-of-type");
			//将第一张图片克隆到最后一张
			imgBox.append(first.clone());
			//将最后一张图片放入第一张的前面
			last.clone().insertBefore(first);
			//获取所有图片li
			var list = imgBox.find("li");
			// console.log(list);\
			//将图片的长度length赋值给count
			var count = list.length;
			//ul的总长度就为banner盒子的宽度*总共li的个数
			imgBox.width(count * bannerWidth);
			//设置每个li的宽度
			list.width(bannerWidth);
			//设置默认显示第一张图片
			imgBox.css("left", -bannerWidth);
			//设置动画效果
			var index = 1;
			var imgAnimation = function () {
				//调用zepto中的一个动画函数
				imgBox.animate(
					//第一个对象,需要传入css动画的值
					{ "left": -index * bannerWidth },
					//完成动画所需要的时间
					200,
					//动画完成贝斯曲线
					"ease-in-out",
					//完成动画时的回调函数
					function () {
						//判断图片是不是到了最后一张
						if (index == count - 1) {
							//如果是最后一张则让索引等于1,瞬间偏移到索引为1的位置
							index = 1;
							imgBox.css("left", -index * bannerWidth);
						} else if (index == 0) {
							// 判断是不是第一张,
							index = count - 2;
							imgBox.css("left", -index * bannerWidth);
						}
						//为点标记设置样式
						indatior.removeClass("active").eq(index - 1).addClass("active");
					}
				);
			};
			//添加定时器
			var timeId = setInterval(function () {
				index++;
				imgAnimation();
			}, 2000);
			//添加左滑事件
			//在谷歌浏览器中无法启用swipe事件
			imgBox.on("swipeLeft", function () {
				//左滑index应该++
				index++;
				//此处应该清除定时器,重开动画效果
				clearInterval(timeId);
				imgAnimation();
			});
			//添加右滑效果
			imgBox.on("swipeRight", function () {
				index--;
				clearInterval(timeId);
				imgAnimation();
			});
		});
	</script>