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>