点击这里查看效果
可自定义数字样式和左右点击按钮
这个更好:
移入按钮切换版本
更多图片轮播
以下是HTML文件代码:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=8" /> 6 <style type="text/css"> 7 *{padding:0; margin:0;} 8 </style> 9 <link type="text/css" rel="stylesheet" href="http://keleyi.com/keleyi/phtml/jqtexiao/10/jquery.pictrueScroll.css" /> 10 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/10/jquery-1.7.1.min.js"></script> 11 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/10/jquery.pictureScroll.js"></script> 12 <script type="text/javascript" > 13 $(function(){ 14 $("#testScroll").pictrueScrollPlugin({'timeout':2000}); 15 }); 16 </script> 17 <title>jQ图片播放切换左右控制-柯乐义</title> 18 </head> 19 20 <body> 21 <div style="width:800px;margin:0px auto;"><h1>图片播放切换控制</h1> 22 <div><a href="http://keleyi.com/a/bjac/bb5e7986.htm" target="_blank">原文</a></div> 23 </div> 24 <div class="pic_scroll_box" id="testScroll"> 25 <ul> 26 <li><a><img src="http://keleyi.com/keleyi/phtml/jqtexiao/10/images/01.jpg" /></a></li> 27 <li><a><img src="http://keleyi.com/keleyi/phtml/jqtexiao/10/images/02.jpg" /></a></li> 28 <li><a><img src="http://keleyi.com/keleyi/phtml/jqtexiao/10/images/03.jpg" /></a></li> 29 <li><a><img src="http://keleyi.com/keleyi/phtml/jqtexiao/10/images/04.jpg" /></a></li> 30 <li><a><img src="http://keleyi.com/keleyi/phtml/jqtexiao/10/images/05.jpg" /></a></li> 31 </ul> 32 <div class="nums"> 33 <span class="on"></span> 34 <span></span> 35 <span></span> 36 <span></span> 37 <span></span> 38 </div> 39 40 </div> 41 </body> 42 </html>