能够用手指滑动的焦点轮播图——swipe.js
1.swipe.js 专门用来制作手指滑动的焦点轮播图
使用步骤：
下载swipe.js文件——》新建HTML5页面——》添加视口约束——》添加两个div，第一个的id名称可以任意，第二个固定为：“swipe-wrap”——》插入放置轮播图的div,而不是ul(因为swipe.js库只支持div)——》添加CSS样式——》引用JQuery 和swipe.js库——》。。。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手机滑动轮播图</title>
<meta content="width=device-width,minimum-scale=1.00001,maximum-scale=1.00001,shrink-to-fit=no,
user-scalable=no,minimal-ui" name="viewport">
</head>
<style type="text/css">
*{
margin:0;
padding: 0;
list-style: none;
}
/* Swipe 2 required styles */
#lunbotu {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
/* END required styles */
.swipe-wrap img{
width: 100%;
}
.yuandian {
right:10px;
bottom:10px;
position: absolute;
/*height: 40px;*/
}
.yuandian li{
width: 20px;
height: 20px;
border-radius: 50%;
background: blue;
float: left;
margin-right: 10px;
}
.yuandian .cur{
background:red;
}
</style>
<body>
<div id="lunbotu">
<div class="swipe-wrap"> <!--此处class的名称是固定的-->
<div><img src="images/daiyu.png" ></div>
<div><img src="images/baochai.jpg" ></div>
<div><img src="images/xiangyun.png" ></div>
<div><img src="images/tanchun.png" ></div>
<div><img src="images/wangxifeng.png" ></div>
<div><img src="images/liwan.png" ></div>
</div>
<ul class="yuandian">
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src=js/swipe.js></script>
<script>
// pure JS
var elem = document.getElementById(lunbotu);
window.mySwipe = Swipe(elem, {
// startSlide: 4,
auto: 3000, //每隔3000ms，自动轮播一次
// continuous: true,
// disableScroll: true,
// stopPropagation: true,
// 回调函数表示没做完一个轮播，就执行下面的内容
callback: function(index, element) {
// console.log(index); //在控制台输出index的值
// 让自己的li添加cur类，其他的兄弟li移除cur类，也就是一种排他
$(".yuandian li").eq(index).addClass("cur").siblings().removeClass("cur");
}
// transitionEnd: function(index, element) {}
});
// 点击小圆点，图片会有一个slide的效果
$(.yuandian li).click(function(){
mySwipe.slide($(this).index());
});
// with jQuery
// window.mySwipe = $(#mySwipe).Swipe().data(Swipe);
</script>
</body>
</html> 运行效果：
1）自动轮播
2)用手指滑动，也会切换
3）点击小圆点，也会实现切换
上一篇：
IDEA上Java项目控制台中文乱码