1:下载ScrollPic.js。下载地址: http://www.jq-school.com/DownLoad.aspx?id=278ScrollPic.js对于一些新手来说是一个很好理解运用的图片左右滚动插件,兼容性较好,可以放心大胆的使用。
2:引入
<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ScrollPic.js" type="text/javascript" charset="utf-8"></script>
3:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片左右滚动</title> <style type="text/css"> ul{ list-style: none; padding: 0; margin: 0; } .photo_nr ul li { float: left; margin: 0 15px; line-height: 30px; text-align: center; } .photo_nr p { padding: 0; margin: 0; } a{ background: url(img/ljt.jpg) no-repeat; width: 40px; height: 40px; display: block; } </style> </head> <body> <div class="photo_nr"> <a href="javascript:;" id="LeftArr"></a> <ul id="picList1"> <li> <div class="photo_img"><img src="img/news_1.png" alt=""/></div> <p>图片滚动</p> </li> <li> <div class="photo_img"><img src="img/news_1.png" alt=""/></div> <p>图片滚动</p> </li> <li> <div class="photo_img"><img src="img/news_1.png" alt=""/></div> <p>图片滚动</p> </li> <li> <div class="photo_img"><img src="img/news_1.png" alt=""/></div> <p>图片滚动</p> </li> <li> <div class="photo_img"><img src="img/news_1.png" alt=""/></div> <p>图片滚动</p> </li> <div style="clear: both;"></div> </ul> <a href="javascript:;" id="RightArr"></a> </div> <script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/ScrollPic.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { var cc1 = new ScrollPic(); cc1.scrollContId = "picList1"; // 内容容器ID,picList1加到容器上, cc1.arrLeftId = "LeftArr";//左箭头ID cc1.arrRightId = "RightArr"; //右箭头ID cc1.frameWidth = 1200; //显示框的宽度 cc1.pageWidth = 1; //翻页宽度 cc1.speed = 10; //移动速度(单位毫秒,越小越快) cc1.space = 10; //每次移动像素(单位px,越大越快) cc1.autoPlay = true; //自动播放 cc1.autoPlayTime = 0.03; //自动播放间隔时间(秒) cc1.initialize(); //初始化 }); </script> </body> </html>