<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,initial-scale=1.0,minimum-scale=0.1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>移动端左右+自动滚动jQuery插件</title>
<link href="css/layout.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div>
<article>
<!--scroll-->
<div class="scroll relative">
<div class="scroll_box" id="scroll_img">
<ul class="scroll_wrap">
<li><a href="#"><img src="images/1.jpg" width="100%" /></a></li>
<li><a href="#"><img src="images/2.jpg" width="100%" /></a></li>
<li><a href="#"><img src="images/3.jpg" width="100%" /></a></li>
</ul>
</div>
<span class="scroll_position_bg opacity6"></span>
<ul class="scroll_position" id='scroll_position'>
<li class="on"><a href="javascript:void(0);">1</a></li>
<li><a href="javascript:void(0);">2</a></li>
<li><a href="javascript:void(0);">3</a></li>
</ul>
</div>
<!--scroll-->
</article>
</div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src='js/hhSwipe.js'></script>
<script>
var slider = Swipe(document.getElementById('scroll_img'), {
auto: 3000,
continuous: true,
callback: function(pos) {
var i = bullets.length;
while (i--) {
bullets[i].className = ' ';
}
bullets[pos].className = 'on';
}
});
var bullets = document.getElementById('scroll_position').getElementsByTagName('li');
$(function(){
$('.scroll_position_bg').css({
width:$('#scroll_position').width()
});
});
</script>
<div style="text-align:center;clear:both">
<p>来源：<a href="http://www.jb51.net/jiaoben/" target="_blank">jquery教程</a></p>
</div>
</body>
</html>
一款移动端左右自动滚动的图片轮播jQuery插件.zip
版权申诉
128 浏览量
2022-11-10
02:29:57
上传
评论
收藏 906KB ZIP 举报
一款移动端左右自动滚动的图片轮播jQuery插件.zip （7个子文件） 
132677802970768805 css 
layout.css 2KB images 
2.jpg 231KB 1.jpg 339KB 3.jpg 296KB
index.html 2KB js jquery.min.js 93KB hhSwipe.js 14KB资源评论
