jquery touchslider滑动图片轮播

闻道有先后，持之以恒 2015-07-16 05:10:18

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">

<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>滑屏图片轮播demo</title>
<style>

.box{
width : 150px;
height : 120px;
overflow : hidden;
border : solid 1px red;
}
.imgBox a img{
width : 150px;
height : 120px;
}

.hd{
position:absolute;
height:50px;
line-height:28px;
bottom:765px;
right:1760px;
z-index:1;
}
.hd .off{
display : inline-block;
width : 5px;
height : 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius : 5px;
background : #FF0000;
text-indent : -9999px;
overflow : hidden;
margin : 0 6px;
}
.hd .on{
background:#28FF28;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.touchslider.js"></script>

<script type="text/javascript">
$(function(){
var ts = $(".box").touchSlider({
container: this,
duration: 350,
delay: 3000,
//namespace: "touchslider",
margin: 5,
//next: ".touchslider-next",
pagination: ".off",
currentClass: "on",
//prev: ".touchslider-prev",
mouseTouch: true,
viewport: ".imgBox",
scroller: $(".imgBox").children(),
autoplay: true
});
});

</script>
</head>
<body>
<div class="box">
<div class="imgBox">
<a href="javascript:void(0)"><img alt="1" title="1" src="images/touchslider/1.jpg"/></a>
<a href="javascript:void(0)"><img alt="2" title="2" src="images/touchslider/2.jpg"/></a>
<a href="javascript:void(0)"><img alt="3" title="3" src="images/touchslider/3.jpg"/></a>
<a href="javascript:void(0)"><img alt="4" title="4" src="images/touchslider/4.jpg"/></a>
</div>
</div>
<div class="hd">
<a class="off on"></a>
<a class="off"></a>
<a class="off"></a>
<a class="off"></a>
</div>
</body>
</html>
不知道为什么下面的4个小圆不自动轮换，其他效果还好

...全文