最近各种跑面试，终于还是被问到这个，一脑子浆糊，当时没想出来首尾相接怎么搞，回来之后研究了一波，终于搞出来了，不多说，直接看代码
代码参考了一位已经写好了图片轮播功能的（再次表示感谢），但是没有首尾相接的功能，本人在此基础上增加了首尾相接功能。
效果如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>图片轮播</title>
6 <style type="text/css">
7 body,div,ul,li,a,img{margin: 0;padding: 0;}
8 ul,li{list-style: none;}
9 a{text-decoration: none;}
10 #wrapper{
11 position: relative;
12 margin: 30px auto; /* 上下边距30px，水平居中 */
13 width: 400px;
14 height: 200px;
15 }
16 #banner{
17 position:relative;
18 width: 400px;
19 height: 200px;
20 overflow: hidden;
21 }
22 .imgList{
23 position:relative;
24 width:2000px;
25 height:200px;
26 z-index: 10;
27 overflow: hidden;
28 }
29 .imgList li{float:left;display: inline;}
30 #prev,
31 #next{
32 position: absolute;
33 top:80px;
34 z-index: 20;
35 cursor: pointer;
36 opacity: 0.2;
37 filter:alpha(opacity=20);
38 }
39 #prev{left: 10px;}
40 #next{right: 10px;}
41 #prev:hover,
42 #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
43
44 </style>
45 </head>
46 <body>
47 <div id="wrapper"><!-- 最外层部分 -->
48 <div id="banner"><!-- 轮播部分 -->
49 <ul class="imgList"><!-- 图片部分 -->
50 <li><a href="#"><img src="./img/1.jpg" width="400px" height="200px" alt="1"></a></li>
51 <li><a href="#"><img src="./img/2.jpg" width="400px" height="200px" alt="2"></a></li>
52 <li><a href="#"><img src="./img/3.jpg" width="400px" height="200px" alt="3"></a></li>
53 <li><a href="#"><img src="./img/4.jpg" width="400px" height="200px" alt="4"></a></li>
54 <li><a href="#"><img src="./img/5.jpg" width="400px" height="200px" alt="5"></a></li>
55 </ul>
56 <img src="./img/prev.png" width="40px" height="40px" id="prev">
57 <img src="./img/next.png" width="40px" height="40px" id="next">
58 </div>
59 </div>
60 <script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
61 <script type="text/javascript">
62 var curIndex = 0, //当前index
63 imgLen = $(".imgList li").length; //图片总数
64 $(".imgList").css("width", (imgLen+1)*400+"px");
65 // 定时器自动变换3秒每次
66 var autoChange = setInterval(function(){
67 if(curIndex < imgLen-1){
68 curIndex ++;
69 }else{
70 curIndex = 0;
71 }
72 //调用变换处理函数
73 changeTo(curIndex);
74 },3000);
75
76 //左箭头滑入滑出事件处理
77 $("#prev").hover(function(){
78 //滑入清除定时器
79 clearInterval(autoChange);
80 }, function(){
81 //滑出则重置定时器
82 autoChangeAgain();
83 });
84
85 //左箭头点击处理
86 $("#prev").click(function(){
87 //根据curIndex进行上一个图片处理
88 // curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
89 if (curIndex == 0) {
90 var element = document.createElement("li");
91 element.innerHTML = $(".imgList li")[imgLen - 1].innerHTML;
92 // $(".imgList li")[imgLen - 1].remove();
93 $(".imgList").prepend(element);
94 $(".imgList").css("left", -1*400+"px");
95 changeTo(curIndex);
96 curIndex = -1;
97 } else if (curIndex == -1) {
98 $(".imgList").css("left", -(imgLen-1)*400+"px");
99 curIndex = imgLen-2;
100 $(".imgList li")[0].remove();
101 changeTo(curIndex);
102 } else {
103 --curIndex;
104 changeTo(curIndex);
105 }
106
107 });
108
109 //右箭头滑入滑出事件处理
110 $("#next").hover(function(){
111 //滑入清除定时器
112 clearInterval(autoChange);
113 }, function(){
114 //滑出则重置定时器
115 autoChangeAgain();
116 });
117 //右箭头点击处理
118 $("#next").click(function(){
119 // curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
120 console.log(imgLen);
121 if (curIndex == imgLen-1) {
122 var element = document.createElement("li");
123 element.innerHTML = $(".imgList li")[0].innerHTML;
124 // $(".imgList li")[0].remove();
125 $(".imgList").append(element);
126 ++curIndex;
127 } else if (curIndex == imgLen) {
128 curIndex = 0;
129 $(".imgList").css("left", "0px");
130 $(".imgList li")[imgLen].remove();
131 curIndex++;
132 } else {
133 ++curIndex;
134 }
135 changeTo(curIndex);
136 });
137
138 //清除定时器时候的重置定时器--封装
139 function autoChangeAgain(){
140 autoChange = setInterval(function(){
141 if(curIndex < imgLen-1){
142 curIndex ++;
143 }else{
144 curIndex = 0;
145 }
146 //调用变换处理函数
147 changeTo(curIndex);
148 },3000);
149 }
150
151
152 function changeTo(num){
153 var goLeft = num * 400;
154 $(".imgList").animate({left: "-" + goLeft + "px"},500);
155 }
156 </script>
157 </body>
158 </html>
时间： 2024-10-08 09:30:36