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

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

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

效果如下:

  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>
时间: 09-19

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

基于原生js的图片轮播效果简单实现

基本效果如下: 实现了三张图片自动轮播+按键点击切换的效果. 基本思想: 图片轮播的效果和老式电影院的胶片放映形式很相似,在老式的电影院放映中,使用长长的胶片记录影片,胶片上是按顺序排列的一系列图片,通过快速通过放映机放映口,使这些图片产生一个连贯的切换效果,形成了动态的影片.所以,这里图片轮播的形式也可以采用这种方式来形成动画效果. 形式如下图: (黑框即我们的最外层的容器,充当放映机的存在:绿框就是胶片,上面搭载着很多的图片:粉框内即我们要轮播的图片) 从上图出发,我们要做到图片轮播,那么只

用JS做图片轮播

脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:mdxy-dxy 网上比较常见的用jquery实现的图片轮播效果代码. 演示地址:http://img.jb51.net/online/picPlayer/picplay.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/

原生js实现图片轮播效果

思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Carousel figure</title> 5 <meta charset="utf-8"> 6 <!-- 浏览器标签页显示图标 --> 7 <lin

js实现图片轮播

实现图片轮播的效果 1 <script language =javascript > 2 function $(id){ 3 return document.getElementById(id); 4 } 5 var curIndex = 0; 6 //时间间隔 单位毫秒 7 var times = 1000; 8 var arr = []; 9 arr[0] = "0.jpg"; 10 arr[1] = "1.jpg"; 11 arr[2] = &qu

JS——网页图片轮播特效

焦点图轮播 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"><head> 3 <meta http-equiv="Content-T

CSS/HTML/JS实现图片轮播

实现原理 将点击的a标签的href属性值赋给img标签的src属性,这样有个好处,就是如果浏览器不支持js的话,点击a标签也可跳转到图片地址看到图片,不会影响内容的呈现 注:需要导入jquery库 html代码 <div class="banner"> <img src="1.png"> <ul> <li><a href="1.png">1</a></li> &l

js实现图片轮播图(一)

一.实现原理 (1)将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏: (2)轮播图分为手动轮播和自动轮播: 手动轮播的重点是每次点击图片下方的小圆圈,获得它的索引号,并让与之对应索引号的图片显示,并且此时的小圆圈为高亮显示: 自动轮播:利用定时器setInterval(),来每隔一定的时间来播放一次图片. (3)所有的基础知识:dom操作,定时器,事件运用. 二.轮播图页面布局: <div id="content">   <!-- 总

JS特效----图片轮播

<html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0px; padding: 0px; } #stage { width: 500px; height: 300px; border: 3px solid black; margin: 100px; overflow: hidden; position: relative;

原生JS实现图片轮播

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>大图滚动</title> <style type="text/css"> *{ margin:0; padding:0; border:0; } .clear{ *zoom:1; } .clear:after{ visibil