原生JavaScript之“淘宝轮播图”

最新推荐文章于 2022-05-05 07:15:00 发布

dilourang7883

最新推荐文章于 2022-05-05 07:15:00 发布

阅读量221

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Hmin2199/p/6287772.html

版权

轮播图是我们学习原生js的必经之路

它包含很多基本知识的运用，像this的使用，DOM的操作，还有setInterval的使用和清除，浮动与定位等等，很好的考察了我们的基础知识牢不牢固，

话不多说，直接上图

HTML代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>淘宝轮播图</title>
 6     <link rel="stylesheet" href="css/initialize.css"/>
 7     <link rel="stylesheet" href="css/tblunbotu.css"/>
 8 </head>
 9 <body>
10 <div id="container" class="clearFix">
11     <div id="list" class="clearFix" style="left: -520px">
12         <img src="img/5.jpg" alt=""/>
13         <img src="img/1.jpg" alt=""/>
14         <img src="img/2.jpg" alt=""/>
15         <img src="img/3.jpg" alt=""/>
16         <img src="img/4.jpg" alt=""/>
17         <img src="img/5.jpg" alt=""/>
18         <img src="img/1.jpg" alt=""/>
19     </div>
20     <div id="buttons" class="clearFix">
21         <span class="on"></span>
22         <span></span>
23         <span></span>
24         <span></span>
25         <span></span>
26     </div>
27     <a href="javascript:;" id="prev" class="arrow">&lt;</a>
28     <a href="javascript:;" id="next" class="arrow">&gt;</a>
29 </div>
30 <script type="text/javascript" src="js/tblunbotu.js"></script>
31 </body>
32 </html>

CSS样式如下：

 1 /*
 2     第一步：设置外部框的样式
 3     第二步: 设置图片框的样式
 4     第三步: 设置箭头的样式
 5     第四步: 设置小圆点的样式
 6 */
 7 #container {
 8     margin: 50px auto;
 9     position: relative;
10     width: 520px;
11     height: 280px;
12     overflow: hidden;
13 }
14 #list {
15     position: absolute;
16     z-index: 1;
17     width: 3640px;
18 }
19 #list img {
20     float: left;
21     width: 520px;
22     height: 280px;
23 }
24 #buttons {
25     height: 10px;
26     width: 100px;
27     position: absolute;
28     left: 0;/*设置水平垂直居中*/
29     right: 0;/*设置水平垂直居中*/
30     margin: 0 auto;/*设置水平垂直居中*/
31     bottom: 20px;
32     z-index: 2;
33 }
34 
35 #buttons span {
36     float: left;
37     margin-right: 5px;
38     width: 10px;
39     height: 10px;
40     border: 1px solid #cccccc;
41     border-radius: 50%;
42     background: #333;
43     cursor: pointer;
44 }
45 #buttons .on {
46     background: orangered;
47 }
48 
49 .arrow {
50     width: 40px;
51     height: 40px;
52     display: none;
53     position: absolute;
54     top: 0; /*设置水平垂直居中*/
55     bottom: 0; /*设置水平垂直居中*/
56     margin: auto 0; /*设置水平垂直居中*/
57     font-size: 36px;
58     font-weight: bold;
59     line-height: 39px;
60     text-align: center;
61     color: #fff;
62     background-color: RGBA(0, 0, 0, .3);
63     cursor: pointer;
64     z-index: 2;
65 }
66 .arrow:hover{
67     background-color: RGBA(0, 0, 0, .7);
68 }
69 #container:hover .arrow {
70     display: block;
71 }
72 
73 #prev{
74     left: 10px;
75 }
76 #next{
77     right: 10px;
78 }

javascript代码如下

  1 /**
  2  * Created by zhm on 17.1.15.
  3  */
  4     /*
  5     *知识点：
  6     *   this使用
  7     *   DOM事件
  8     *   定时器
  9     *
 10     *   思路：
 11     *   （1）设置它左右移动
 12     *       问题：传入数字为NAN??
 13     *       解决：在页面中增加属性style：left:0
 14     *   （2）平滑移动（移动时间固定，每次移动的距离不一样）
 15     *       问题：连续点击出现晃动？---设置标志位
 16     *             出现空白页？？--- 第一张图片前加上最后一张，最后一张图片前加上第一张
 17     *                              在类list的标签中增加属性style：left:-520px;
 18     *                              设置无限滚动判断
 19     *
 20     *   （3）设置小圆点
 21     *       首先将所有的类置为空，当前类置为on
 22     *       绑定小圆点和图片
 23     *       绑定小圆点和左右箭头
 24     *       设置定时器，鼠标划上去停止，移开自动轮播
 25     *
 26     * */
 27 
 28 
 29     //1.获取元素
 30     var container = document.getElementById("container");
 31     var list = document.getElementById("list");
 32     var prev = document.getElementById("prev");
 33     var next = document.getElementById("next");
 34     var buttons = document.getElementById('buttons').getElementsByTagName('span');
 35     var timer = null;
 36     var timer2 = null;
 37     var flag = true;
 38     var index =0;
 39 
 40 
 41 
 42     //2.设置函数
 43     function moveImg(dis) {
 44         var time = 400;//运动的总时间
 45         var eachTime = 10;//每次小移动的时间
 46         var eachDis = dis/(time/eachTime);//每次小移动的距离
 47         var newWeizhi = parseInt(list.style.left) + dis;//新位置
 48         flag = false;
 49 
 50 
 51         function eachMove(){
 52             if(dis > 0 && parseInt(list.style.left)< newWeizhi || dis < 0 && parseInt(list.style.left)>newWeizhi){
 53                 list.style.left = parseInt(list.style.left) + eachDis + 'px';
 54             }else {
 55                 flag = true;
 56                 clearInterval(timer);
 57                 list.style.left = newWeizhi + 'px';
 58                 //无限滚动判断
 59                 if (newWeizhi == 0) {
 60                     list.style.left = -2600 + 'px';
 61                 }
 62                 if (newWeizhi == -3120) {
 63                     list.style.left = -520 + 'px';
 64                 }
 65             }
 66 
 67         }
 68         timer = setInterval(eachMove, 10);
 69     }
 70 
 71     //3.设置点击切换图片
 72     next.onclick = function () {
 73         if(!flag) return;
 74         moveImg(-520);
 75         //绑定箭头和小圆点
 76         if (index == 4) {
 77             index = 0;
 78         } else {
 79             index++;
 80         }
 81         buttonsShow();
 82     };
 83     prev.onclick = function () {
 84         if(!flag) return;
 85         moveImg(520);
 86 
 87     //绑定箭头和小圆点
 88         if (index == 0) {
 89             index = 4;
 90         } else {
 91             index--;
 92         }
 93         buttonsShow();
 94 
 95     };
 96 
 97     //4.设置小圆点的绑定
 98 
 99     function buttonsShow() {
100         //将之前的小圆点的样式清除
101         for (var i = 0; i < buttons.length; i++) {
102             if (buttons[i].className == "on") {
103                 buttons[i].className = "";
104                 break;
105             }
106         }
107         buttons[index].className = "on";
108     }
109 
110     for(var i = 0 ;i<buttons.length;i++){
111         buttons[i].value  = i;
112         //使用自执行函数解决i的赋值问题
113         (function(){
114             buttons[i].onclick = function(){
115                 if(this.value == index) return;
116                 var offset = (this.value - index)* -520;
117                 moveImg(offset);
118                 index = this.value;
119                 buttonsShow();
120             }
121         })();
122     }
123 
124    //5.设置自动轮播
125    timer2 = setInterval(next.onclick,1500);
126    container.onmouseover = function(){
127        clearInterval(timer2);
128    };
129    container.onmouseout = function(){
130        timer2 = setInterval(next.onclick,1000);
131    };

有什么好的建议可以留言，相互讨论哟，一起进步~fighting~~

源码下载：http://files.cnblogs.com/files/Hmin2199/%E6%B7%98%E5%AE%9D%E8%BD%AE%E6%92%AD%E5%9B%BE.zip

转载于:https://www.cnblogs.com/Hmin2199/p/6287772.html

dilourang7883

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生JavaScript之“淘宝轮播图”

轮播图是我们学习原生js的必经之路它包含很多基本知识的运用，像this的使用，DOM的操作，还有setInterval的使用和清除，浮动与定位等等，很好的考察了我们的基础知识牢不牢固，话不多说，直接上图HTML代码如下： 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"&gt...
复制链接

扫一扫