使用JS实现图片轮播的实例(前后首尾相接)

2019-11-19 15:21:13

字体：大中小

来源：转载

供稿：网友

最近各种跑面试，终于还是被问到这个，一脑子浆糊，当时没想出来首尾相接怎么搞，回来之后研究了一波，终于搞出来了，不多说，直接看代码

代码参考了一位已经写好了图片轮播功能的（再次表示感谢），但是没有首尾相接的功能，本人在此基础上增加了首尾相接功能。

效果如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片轮播</title> <style type="text/css"> body,div,ul,li,a,img{margin: 0;padding: 0;} ul,li{list-style: none;} a{text-decoration: none;} #wrapper{  position: relative;  margin: 30px auto; /* 上下边距30px，水平居中 */  width: 400px;  height: 200px; } #banner{  position:relative;  width: 400px;  height: 200px;  overflow: hidden; } .imgList{  position:relative;  width:2000px;  height:200px;  z-index: 10;  overflow: hidden; } .imgList li{float:left;display: inline;} #prev, #next{  position: absolute;  top:80px;  z-index: 20;  cursor: pointer;  opacity: 0.2;  filter:alpha(opacity=20); } #prev{left: 10px;} #next{right: 10px;} #prev:hover, #next:hover{opacity: 0.5;filter:alpha(opacity=50);}</style></head><body> <div id="wrapper"><!-- 最外层部分 --> <div id="banner"><!-- 轮播部分 -->  <ul class="imgList"><!-- 图片部分 -->  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/1.jpg" width="400px" height="200px" alt="1"></a></li>  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/2.jpg" width="400px" height="200px" alt="2"></a></li>  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/3.jpg" width="400px" height="200px" alt="3"></a></li>  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/4.jpg" width="400px" height="200px" alt="4"></a></li>  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/5.jpg" width="400px" height="200px" alt="5"></a></li> </ul> <img src="./img/prev.png" width="40px" height="40px" id="prev"> <img src="./img/next.png" width="40px" height="40px" id="next"></div></div><script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script><script type="text/javascript">var curIndex = 0, //当前index imgLen = $(".imgList li").length; //图片总数$(".imgList").css("width", (imgLen+1)*400+"px");// 定时器自动变换3秒每次var autoChange = setInterval(function(){ if(curIndex < imgLen-1){  curIndex ++; }else{  curIndex = 0; } //调用变换处理函数 changeTo(curIndex);},3000);//左箭头滑入滑出事件处理$("#prev").hover(function(){ //滑入清除定时器 clearInterval(autoChange);}, function(){ //滑出则重置定时器 autoChangeAgain();});//左箭头点击处理$("#prev").click(function(){ //根据curIndex进行上一个图片处理 // curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1); if (curIndex == 0) {  var element = document.createElement("li");  element.innerHTML = $(".imgList li")[imgLen - 1].innerHTML;  // $(".imgList li")[imgLen - 1].remove();  $(".imgList").prepend(element);  $(".imgList").css("left", -1*400+"px");  changeTo(curIndex);  curIndex = -1; } else if (curIndex == -1) {  $(".imgList").css("left", -(imgLen-1)*400+"px");  curIndex = imgLen-2;  $(".imgList li")[0].remove();  changeTo(curIndex); } else {  --curIndex;  changeTo(curIndex); }});//右箭头滑入滑出事件处理$("#next").hover(function(){ //滑入清除定时器 clearInterval(autoChange);}, function(){ //滑出则重置定时器 autoChangeAgain();});//右箭头点击处理$("#next").click(function(){ // curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0; console.log(imgLen); if (curIndex == imgLen-1) {  var element = document.createElement("li");  element.innerHTML = $(".imgList li")[0].innerHTML;  // $(".imgList li")[0].remove();  $(".imgList").append(element);  ++curIndex; } else if (curIndex == imgLen) {  curIndex = 0;  $(".imgList").css("left", "0px");  $(".imgList li")[imgLen].remove();  curIndex++; } else {  ++curIndex; } changeTo(curIndex);});//清除定时器时候的重置定时器--封装function autoChangeAgain(){ autoChange = setInterval(function(){  if(curIndex < imgLen-1){   curIndex ++;  }else{   curIndex = 0;  } //调用变换处理函数 changeTo(curIndex); },3000);}function changeTo(num){ var goLeft = num * 400; $(".imgList").animate({left: "-" + goLeft + "px"},500);}</script></body></html>

以上这篇使用JS实现图片轮播的实例(前后首尾相接)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：解决Vue编译时写在style中的路径问题

下一篇：Node调用Java的示例代码