图片滑动效果一般用于首页的展示，这个按照别人的思路，自己扩充修改了下，纯属自己笔记。
JS代码
1 <script src="jquery/jquery-2.1.1.js"></script> 2 <script> 3 var imgTotal = 8; //总的图片数量 4 var imgi = 1; //默认第一张图片 5 var autoRun; //自动滚动 6 function run(imgI) { //传递图片编号 7 imgi = imgI; //赋值给全局变量 imgi 8 switch (imgi) { // 通过编号判断为哪幅图片 9 case 1: //设定每个图片的标签 10 $("#text1 p").html("<a href=‘images/pic1.jpg‘ target=‘_blank‘>菊花〔拉丁学名：Dendranthema morifolium（Ramat. ）Tzvel.〕，常用chrysanthemum。菊花是菊科，菊属多年生草本... </a>"); break; 11 case 2: 12 $("#text1 p").html("<a href=‘images/pic2.jpg‘ target=‘_blank‘>沙漠</a>"); break; 13 default: $("#text1 p").text("this is text"); break; 14 } 15 16 $("#divlinks").find("a").removeClass("aaa"); //取消A标签中的aaa类 17 $("#divlinks").find("a[title=‘" + imgi + "‘]").addClass("aaa"); //根据a标签的title 属性查找当前图片，设置aaa类 18 19 if ($("#divimg").is(":animated")) { $("#divimg").stop(); } //在执行现在动作之前，先停止之前的动作 20 $("#divimg").animate({ left: -(imgi - 1) * 1000 + "px" }, "1000"); //设置动画，向左移动1000+的宽度，一张图片宽度为1000PX,1秒钟移动完成 21 22 } 23 function autorun() { 24 run(imgi); 25 if (imgi == imgTotal) { //最后一张图片 则将图片编号重置为1 26 imgi = 1 27 } else { 28 imgi++; //图片编号累加 29 } 30 31 } 32 function picrun() { //循环执行 33 run(1); //保持第一次运行是执行第一张图片 34 autoRun = setInterval(autorun, "3000"); //无限循环 ，3秒间隔 35 } 36 $(document).ready(function () { 37 picrun(); //文档 加载完执行 38 $(".main").hover(function(){ //鼠标在指定图片时， 停止滚动 39 clearInterval(autoRun); 40 }, function () { 41 autoRun = setInterval(autorun, "3000"); // 离开图片，继续上一次滚动 42 }) 43 }) 44 45 46 47 </script>
CSS代码
1 <style type="text/css"> 2 body { 3 text-align: center; 4 } 5 6 .main { 7 margin: auto; 8 width: 1000px; 9 height: 400px; 10 position: relative; 11 border: 1px solid #000; 12 overflow:hidden; //隐藏超出范围的图片 13 } 14 15 .pic { 16 width: 10000px; //设置极大宽度，不然自自图片无法正确FLOAT:LEFT 17 height: 400px; 18 background-color: #000000; 19 position: absolute; 20 top: 0px; 21 } 22 23 .aaa { 24 background-color:#392940; 25 } 26 27 .img { 28 float: left; 29 width: 1000px; 30 height: 400px; 31 } 32 33 .text { 34 margin-left:20px; 35 color: #fff; 36 width: 500px; 37 height: 50px; 38 position: absolute; 39 left: 0px; 40 bottom: 0px; 41 text-align:left; 42 } 43 .text p a{ 44 color:#fff; 45 } 46 .menu { 47 width: 1000px; 48 height: 50px; 49 position: absolute; 50 left: 0px; 51 bottom: 0px; 52 background-color: #000000; 53 opacity: 0.5; 54 55 } 56 57 .divlink { 58 position: absolute; 59 right: 0px; 60 bottom: 0px; 61 width: 430px; 62 height: 50px; 63 } 64 65 .divlink a { 66 font-weight: bold; 67 text-decoration: none; 68 text-align: center; 69 line-height: 30px; 70 display: block; 71 border: 1px solid #fff; 72 width: 30px; 73 height: 30px; 74 float: left; 75 margin: 10px; 76 color: #fff; 77 } 78 79 .divlink a:hover { 80 background-color: #392940; 81 opacity: 0.5; 82 } 83 </style>
HTML代码
1 <body> 2 <div class="main"> 3 <div class="pic" id="divimg"> 4 <a href="images/pic1.jpg" target="_blank"> 5 <img src="images/pic1.jpg" alt="" class="img" /></a> 6 <a href="images/pic2.jpg" target="_blank"> 7 <img src="images/pic2.jpg" alt="" class="img" /></a> 8 <a href="images/pic3.jpg" target="_blank"> 9 <img src="images/pic3.jpg" alt="" class="img" /></a> 10 <a href="images/pic4.jpg" target="_blank"> 11 <img src="images/pic4.jpg" alt="" class="img" /></a> 12 <a href="images/pic5.jpg" target="_blank"> 13 <img src="images/pic5.jpg" alt="" class="img" /></a> 14 <a href="images/pic6.jpg" target="_blank"> 15 <img src="images/pic6.jpg" alt="" class="img" /></a> 16 <a href="images/pic7.jpg" target="_blank"> 17 <img src="images/pic7.jpg" alt="" class="img" /></a> 18 <a href="images/pic8.jpg" target="_blank"> 19 <img src="images/pic8.jpg" alt="" class="img" /></a> 20 </div> 21 <div class="menu"> 22 <div class="text" id="text1"> 23 <p>this is text</p> 24 </div> 25 <div class="divlink" id="divlinks"> 26 <a href="#" title="1" onclick="return run(1)" >1</a> 27 <a href="#" title="2" onclick="return run(2)">2</a> 28 <a href="#" title="3" onclick="return run(3)">3</a> 29 <a href="#" title="4" onclick="return run(4)">4</a> 30 <a href="#" title="5" onclick="return run(5)">5</a> 31 <a href="#" title="6" onclick="return run(6)">6</a> 32 <a href="#" title="7" onclick="return run(7)">7</a> 33 <a href="#" title="8" onclick="return run(8)">8</a> 34 </div> 35 </div> 36 </div> 37 </body>
这个图片滚动的核心还是利用setInterval()方法，支持无限循环滚动。每次循环图片编号+1，到最一张图片重置编号。
最终效果还有由移动图片的距离产生：图片设置float:left,父窗体设置宽度为10000px，使图片横铺，每次方法执行，向左移动1000px，刚好为图片宽度，产生滚动效果
点击图片编号，直接跳转图片
具体见源码