使用JS实现图片轮播的实例(前后首尾相接)
程序员文章站
2022-04-09 21:48:55
最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码
代码参考了一位已经写好了图片轮播功能的(...
最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码
代码参考了一位已经写好了图片轮播功能的(再次表示感谢),但是没有首尾相接的功能,本人在此基础上增加了首尾相接功能。
效果如下:
<!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实现图片轮播的实例(前后首尾相接)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。