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>