MyException - 我的异常网
当前位置:我的异常网» JavaScript » 使用JS实现图片轮播(前前后后首尾相接)

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

www.MyException.Cn  网友分享于:2013-09-28  浏览:0次
使用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>

 

文章评论

Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
程序员和编码员之间的区别
程序员和编码员之间的区别
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
 程序员的样子
程序员的样子
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
10个调试和排错的小建议
10个调试和排错的小建议
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员必看的十大电影
程序员必看的十大电影
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
我的丈夫是个程序员
我的丈夫是个程序员
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
旅行,写作,编程
旅行,写作,编程
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序员的鄙视链
程序员的鄙视链
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序员都该阅读的书
程序员都该阅读的书
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
总结2014中国互联网十大段子
总结2014中国互联网十大段子
如何成为一名黑客
如何成为一名黑客
一个程序员的时间管理
一个程序员的时间管理
编程语言是女人
编程语言是女人
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
Java程序员必看电影
Java程序员必看电影
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
漫画:程序员的工作
漫画:程序员的工作
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
中美印日四国程序员比较
中美印日四国程序员比较
每天工作4小时的程序员
每天工作4小时的程序员
为什么程序员都是夜猫子
为什么程序员都是夜猫子
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
鲜为人知的编程真相
鲜为人知的编程真相
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有