1 css样式： 2 3 *{ 4 margin: 0; 5 padding: 0; 6 } 7 ul{ 8 list-style:none; 9 } 10 .slideShow{ 11 620px; 12 height: 700px; /*其实就是图片的高度*/ 13 border: 1px #eeeeee solid; 14 margin: 100px auto; 15 position: relative; 16 overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/ 17 } 18 .slideShow ul{ 19 2500px; 20 position: relative; 21 /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/ 22 } 23 .slideShow ul li{ 24 float: left; 25 /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/ 26 620px; 27 } 28 .slideShow .showNav{ /*用绝对定位给数字按钮进行布局*/ 29 position: absolute; 30 right: 10px; 31 bottom: 5px; 32 text-align:center; 33 font-size: 12px; 34 line-height: 20px; 35 } 36 .slideShow .showNav span{ 37 cursor: pointer; 38 display: block; 39 float: left; 40 20px; 41 height: 20px; 42 background: #ff5a28; 43 margin-left: 2px; 44 color: #fff; 45 } 46 .slideShow .showNav .active{ 47 background: #b63e1a; 48 } 49 50 //js代码规范： 51 52 <script src="../../../jQuery/js/jquery-2.1.4.js"></script> <script type="text/javascript"> 53 54 $(document).ready(function(){ 55 56 var slideShow=$(".slideShow"), //获取最外层框架的名称 57 58 ul=slideShow.find("ul"), 59 60 showNumber=slideShow.find(".showNav span"), //获取按钮 61 62 oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度 63 64 var timer=null; //定时器返回值，主要用于关闭定时器 65 66 var iNow=0; /*iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0 67 */ 68 showNumber.on("click",function(){ //为每个按钮绑定一个点击事件 69 70 $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉 71 72 var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值 73 74 iNow=index; 75 76 ul.animate({ "left":-oneWidth*iNow, 77 /*注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定 78 */ 79 }) 80 81 }); 82 83 function autoplay(){ 84 85 timer=setInterval(function(){ 86 //打开定时器 87 88 iNow++; 89 //让图片的索引值次序加1，这样就可以实现顺序轮播图片 90 91 if(iNow>showNumber.length-1){ 92 /*当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始 93 */ 94 iNow=0; } 95 96 showNumber.eq(iNow).trigger("click"); 97 //模拟触发数字按钮的click 98 99 },2000); 100 //2000为轮播的时间 101 102 } 103 104 autoplay(); 105 106 slideShow.hover( function(){clearInterval(timer);},autoplay); //另外注意setInterval的用法比较关键。 107 108 }) 109 110 </script> 111 112 主体代码： 113 114 <body> 115 <div class="slideShow"> 116 <!--图片布局开始--> 117 <ul> 118 <li><a href="#"><img src="images/view/111.jpg"/></a></li> 119 <li><a href="#"><img src="images/view/112.jpg" /></a></li> 120 <li><a href="#"><img src="images/view/113.jpg" /></a></li> 121 <li><a href="#"><img src="images/view/114.jpg" /></a></li> 122 </ul> 123 <!--图片布局结束--> 124 125 <!--按钮布局开始--> 126 <div class="showNav"> 127 <span class="active">1</span> 128 <span>2</span> 129 <span>3</span> 130 <span>4</span> 131 </div> 132 <!--按钮布局结束--> 133 </div> 134 135 </body> 136 137 /*总结：个人觉得图片的宽度总和一定要要比整体的宽度要小，这样才能保证图片左移的时候有一定的空间保证图片的完整性。*/