这个是图文的左右滚动，一般是一版几个图片，图片下面配有文字。
现在实现的有：文档首次载入后，会自动切换。如果点击了左右按钮或者是下面的索引小圆，就会关闭定时器。
需要解决的问题是，如果不对轮播图进行操作后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:
移入按钮：
时间： 2024-11-07 00:37:47