<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.cssrain.cn/demo/1/SildeTab/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.imageScroller.js"></script>
<style type="text/css">
#viewer {height:100px; width:300px; clear:both; overflow:hidden; border:3px solid #e5e5e5;}
#viewerFrame {width:505px; clear:both; padding:0;}
#viewer img {width:90px; height:90px; margin:5px; display:inline; border:0;}
#viewer a {display:block; float:left; width:100px; height:100px;}
</style>
<script type="text/javascript">
$(function(){
$("#viewer").imageScroller({
next:"btn1",
prev:"btn2",
frame:"viewerFrame",
width:100,
child: "a",
auto: true
});
});
</script>
</head>
<body>
<div id="viewer">
<div id="viewerFrame">
<a href=""><img src="img/pre1.jpg"></a>
<a href=""><img src="img/pre2.jpg"></a>
<a href=""><img src="img/pre3.jpg"></a>
<a href=""><img src="img/pre4.jpg"></a>
<a href=""><img src="img/pre5.jpg"></a>
</div>
</div>
<span id="btn1">向前</span>
<br/>
<span id="btn2">向后</span>
</body>
</html>
jquery 特效:imageScroller滚动图片效果
4星 · 超过85%的资源 需积分: 14 169 浏览量
2011-11-07
09:29:09
上传
评论 2
收藏 56KB RAR 举报 
imageScroller.rar （8个子文件） 
jQuery-imageScroller img 
pre4.jpg 9KB pre3.jpg 12KB pre2.jpg 7KB pre5.jpg 5KB pre1.jpg 6KB
Thumbs.db 22KB
imageScroller.html 1KB jquery.imageScroller.js 3KB
- 1
- 2
- 3
前往页