这个是图文的左右滚动，一般是一版几个图片，图片下面配有文字。
现在实现的有：文档首次载入后，会自动切换。如果点击了左右按钮或者是下面的索引小圆，就会关闭定时器。
需要解决的问题是，如果不对轮播图进行操作后3s，它又会自动开启定时器进行切换了。
jQuery实现的要添加一个jQuery库文件。可以是本地的，也可是在线的。
好了，话不多说，上代码哈。
html:
1 <div class="container"> 2 <span id="prev" class="prev btn"><</span> 3 <span id="next" class="next btn">></span> 4 <div class="img_container"> 5 <div class="imgbox" style="left:0"> 6 <ul> 7 <li style="background:red;">1</li> 8 <li style="background:blue;">2</li> 9 <li style="background:pink;">3</li> 10 <li>4</li> 11 <li style="background:#ccc;">5</li> 12 <li style="background:010101;">6</li> 13 <li style="background:green;">7</li> 14 <li style="background:maroon;">8</li> 15 <li style="background:#6A3939;">9</li> 16 <li style="background:#0D5224;">10</li> 17 <li style="background:#0D156F;">11</li> 18 <li style="background:#861271;">12</li> 19 <li style="background:#3E0858;">13</li> 20 <li style="background:#C42C64;">14</li> 21 <li style="background:#403E05;">15</li> 22 </ul> 23 </div> 24 <div class="circle"> 25 <span class="current">1</span><span>2</span><span>3</span><span>4</span> 26 </div> 27 </div> 28 </div>
css:
1 <style> 2 *{ 3 margin:0; 4 padding:0; 5 } 6 .container{ 7 width:700px; 8 height:300px; 9 border:1px solid #000; 10 margin:50px auto; 11 position:relative; 12 } 13 .container span.btn{ 14 display:block; 15 width:30px; 16 height:100px; 17 line-height:100px; 18 text-align:center; 19 font-size:40px; 20 background:rgba(0,0,0,.3); 21 position:absolute; 22 top:100px; 23 cursor:pointer; 24 display:none; 25 } 26 .container:hover span.btn{ 27 display:block; 28 } 29 .container span.btn:hover{ 30 background:rgba(0,0,0,.6); 31 } 32 .container span.btn.prev{ 33 left:0; 34 } 35 .container span.btn.next{ 36 right:0; 37 } 38 /**/ 39 .img_container{ 40 width:600px; 41 height:240px; 42 border:1px solid red; 43 margin:30px auto; 44 overflow:hidden; 45 position:relative; 46 } 47 .img_container .imgbox{ 48 position:absolute; 49 left:0; 50 top:0; 51 width:2400px; 52 } 53 .img_container .imgbox li{ 54 float:left; 55 list-style:none; 56 width:130px; 57 height:200px; 58 background:#f60; 59 margin:10px; 60 font-size:30px; 61 color:white; 62 line-height:200px; 63 text-align:center; 64 margin-top:20px; 65 } 66 67 /*焦点图下面的显示索引的小圆环*/ 68 .img_container .circle{ 69 width:64px; 70 height:12px; 71 position:absolute; 72 bottom:4px; 73 left:268px; 74 } 75 .img_container .circle span{ 76 display:block; 77 float:left; 78 width:10px; 79 height:10px; 80 background:#9DA5A5; 81 font-size:12px; 82 margin-right:4px; 83 text-indent:-9999px; 84 border-radius:50%; 85 border:1px solid #000; 86 cursor:pointer; 87 } 88 .img_container .circle span.current{ 89 background:#FF4500; 90 } 91 </style>
js:
1 <script> 2 $(function(){ 3 var page = 1; //定义为当前第一页 4 var i = 4; //每版放四个图片 5 //向后按钮 6 $('span.next').click(function(){ //绑定click事件 7 clearInterval(timer); 8 var container = $(this).parents('div.container'); //根据当前点击元素获取到祖先元素（最外层的idv） container 9 var imgBox = container.find('div.imgbox'); //获取装图片的盒子 10 var imgContainer = container.find('div.img_container'); //获取展示图片的显示屏 11 var iWidth = imgContainer.width(); //获取显示屏的宽度 12 var len = container.find('li').length; //获取列表的个数 13 var pageCount = Math.ceil(len/i); // 分为多少版，一定要注意细节啊，这里的是Math.ceil(),向上取整（只要不是整数，就往大的方向取最小的整数） 14 if(!imgBox.is(":animated")){ //判断装图片的盒子是否正在处于动画 15 if(page == pageCount){ //已经到最后一个版面了，如果再向后，必须跳转到第一个版面 16 imgBox.animate({left:'0px'},'slow'); //通过改变left值，跳转到第一个版面 17 page = 1; 18 }else{ 19 imgBox.animate({left:'-='+iWidth},'slow'); 20 page++; 21 } 22 } 23 container.find('.circle span').eq((page-1)).addClass('current').siblings().removeClass('current'); 24 }); 25 //向前按钮 26 $('span.prev').click(function(){ 27 clearInterval(timer); 28 var container = $(this).parents('div.container'); 29 var imgBox = container.find('div.imgbox'); 30 var imgContainer = container.find('div.img_container'); 31 var iWidth = imgContainer.width(); 32 var len = container.find('li').length; 33 var pageCount = Math.ceil(len/i); 34 if(!imgBox.is(":animated")){ 35 if(page == 1){ 36 imgBox.animate({left:'-='+iWidth*(pageCount-1)},'slow'); 37 page = pageCount; 38 }else{ 39 imgBox.animate({left:'+='+iWidth},'slow'); 40 page--; 41 } 42 } 43 container.find('.circle span').eq((page-1)).addClass('current').siblings().removeClass('current'); 44 }); 45 46 //下面的圆环的鼠标经过事件 47 $('.circle span').click(function(){ 48 var count = $('.circle span').index(this); 49 var container = $(this).parents('div.container'); 50 var imgBox = container.find('div.imgbox'); 51 var imgContainer = container.find('div.img_container'); 52 var iWidth = imgContainer.width(); 53 var len = container.find('li').length; 54 var pageCount = Math.ceil(len/i); 55 if(!imgBox.is(':animated')){ 56 imgBox.animate({left:-iWidth*count},500); 57 } 58 $(this).addClass('current').siblings().removeClass('current'); 59 }); 60 }); 61 62 window.onload = startMove; 63 var timer = null; 64 function startMove(){ 65 var container = $('div.container'); 66 var imgBox = container.find('div.imgbox'); 67 var imgContainer = container.find('div.img_container'); 68 var iWidth = imgContainer.width(); 69 var pPage = 1; 70 /*var offLeft = imgContainer.offset().left; 71 var offLeftImg = Math.round(1800-offLeft);*/ 72 73 timer = setInterval(function(){ 74 75 /*if(imgBox.css('left') == -1800+'px'){ 76 imgBox.animate({left:'0px'}); 77 }else{imgBox.animate({left:'-='+iWidth});}*/ //这中方法不错的哦 78 /*if(imgBox.offset().left <= -1200){ 79 80 imgBox.animate({left:'0px'}); 81 82 } 83 else{imgBox.animate({left:'-='+iWidth});} */ //这种方法不可取 84 if(imgBox.css('left') == -1800+'px'){ 85 imgBox.animate({left:'0px'}); 86 pPage = 1; 87 }else{ 88 imgBox.animate({left:'-='+iWidth}); 89 if(pPage == 4){ 90 pPage = 1; 91 }else{ 92 pPage++; 93 } 94 } 95 /*var imgIndex = Math.abs(parseInt(imgBox.css('left')))/iWidth; 96 $('.circle span').eq((imgIndex+1)).addClass('current').siblings().removeClass('current');*/ 97 $('.circle span').eq(pPage-1).addClass('current').siblings().removeClass('current'); 98 99 },3600); 100 } 101 </script>
左右两个按钮display为none，当鼠标移入祖先元素container时，就会显示出来，当鼠标移入按钮时，透明度增加（即表示越亮，越接近图片或颜色本来的亮度。）
图片下面的索引小圆也有点击效果。点击哪个，哪个就是选中状态，同时上面的板块跟着切换到那一版面。
显示效果为：
移入container:
移入按钮：
