原生js图片渐变轮播

原生js实现的图片轮播左右滑动效果函数封装

方便以后需要的时候拿出来复用。适合新手学习使用。

使用方法
轮播图的html结构就不多说了。不过有一点：为了实现无缝无限轮播，需要在三张图片的最前面和最后面再额外添加两张图片（见下），原理简单说就是当图片滑动到最后一张时立马跳到第二张，眼睛看上去就像前后无缝一样。

把img_slider.js引入html，然后编辑window.onload = (function () { ··· });中的内容。（获取图片床，按钮，标识等元素。然后调用slideImg( container, btn_next, btn_prev, small_dots, img_num, auto_move_interval, move_speed ) 函数

window.onload = (function () {
    var banner_container = document.getElementsByClassName('banners-container')[0];  //大banner图片床
    var next = document.getElementsByClassName('next')[0];
    var prev = document.getElementsByClassName('prev')[0];
    var buttons = document.getElementsByClassName('buttons')[0].getElementsByTagName('span');  //小圆点标识

    slideImg(banner_container, next, prev, buttons, 3, 3000, 26);  //参数说明见功能实现↓
});
//参数说明：                                      // Parameter Description:
// container:图片床；                             // Container: your Photos on it;
// btn_next, btn_prev:切换按钮；                  // Btn_next, btn_prev: toggle button(next&prev);
// small_dots：小圆点标识;                        // Small_dots: small dot mark which picture now on focus;
// img_num：图片数量（不包括前后的附图）;           // Img_num: how many pictures you have.(not including the first one and last one figures pictures);
// move_speed:图片移动速度(数值越小越快！);        // Move_speed: image moving speed (the smaller the value, the faster!);

源码：

HTML&CSS

  1 <!-- Created by zhangboyuan-XD on 2016/5/20 -->
  2 <!--
  3 注意！如果需要显示图片位置的小圆点标识则必须按照demo中的格式书写！
  4 notice! If you need to display a small dot image location identification must be written in accordance with the format of the demo!
  5 -->
  6 
  7 <!doctype html>
  8 <html lang="en">
  9 <head>
 10     <meta charset="UTF-8">
 11     <title>imgSlider demo</title>
 12     <style>
 13         * {
 14             margin:0;
 15             padding:0;
 16             -webkit-box-sizing:border-box;
 17             -moz-box-sizing:border-box;
 18             box-sizing:border-box;
 19         }
 20 
 21         li {
 22             list-style:none;
 23         }
 24 
 25         .clear-float:after {
 26             content:'';
 27             width:0;
 28             height:0;
 29             display:block;
 30             clear:both;
 31         }
 32 
 33         .banners-container {
 34             position:absolute;
 35             width:5900px;
 36             height:340px;
 37             z-index:1;
 38         }
 39 
 40         .banner-wrapper {
 41             position:relative;
 42             width:1180px;
 43             height:340px;
 44             overflow:hidden;
 45             z-index:3;
 46         }
 47 
 48         .banner-wrapper img {
 49             float:left;
 50         }
 51 
 52         .banner-wrapper .btn {
 53             position:absolute;
 54             top:146px;
 55             display:block;
 56             width:24px;
 57             height:48px;
 58             -moz-opacity:.5;
 59             opacity:.5;
 60             z-index:3;
 61         }
 62 
 63         .banner-wrapper .next {
 64             right:0;
 65             background:url("image/arrow.jpg") no-repeat 0 -48px;
 66         }
 67 
 68         .banner-wrapper .prev {
 69             left:0;
 70             background:url("image/arrow.jpg") no-repeat;
 71         }
 72 
 73         .banner-wrapper .buttons {
 74             position:absolute;
 75             height:16px;
 76             width:100px;
 77             bottom:10px;
 78             left:590px;
 79             z-index:3;
 80         }
 81 
 82         .banner-wrapper .buttons span {
 83             float:left;
 84             border:1px solid #fff;
 85             width:16px;
 86             height:16px;
 87             margin-right:15px;
 88             border-radius:50%;
 89             -webkit-border-radius:50%;
 90             -moz-border-radius:50%;
 91             background:#fff;
 92             cursor:pointer;
 93         }
 94 
 95         .banner-wrapper .buttons .on {
 96             border-color:#5c5c5c;
 97             background:#5c5c5c;
 98         }
 99     </style>
100 </head>
101 <body>
102 <div class="banner-wrapper">
103     <ul class="banners-container clear-float" style="left:-1180px;">
104         <!-- 这里前后多出来的两张图是为了实现无限循环 Before and after the extra two <li> is to achieve an infinite loop -->
105         <li><a href="#"><img src="image/banner_3.jpg" alt="banner"></a></li>
106         <li><a href="#"><img src="image/banner_1.gif" alt="banner"></a></li>
107         <li><a href="#"><img src="image/banner_2.jpg" alt="banner"></a></li>
108         <li><a href="#"><img src="image/banner_3.jpg" alt="banner"></a></li>
109         <li><a href="#"><img src="image/banner_1.gif" alt="banner"></a></li>
110     </ul>
111     <a class="next btn" href="#"></a>
112     <a class="prev btn" href="#"></a>
113     <div class="buttons">
114         <!--注意：显示轮播图进度的小圆点，必须给span设置对应的index属性1,2,3，··· -->
115         <span index="1" class="on"></span>
116         <span index="2"></span>
117         <span index="3"></span>
118     </div>
119 </div>
120 <script src="img_slider.js"></script>
121 </body>
122 </html>

JavaScript

  1 /*
  2  *   Created by zhangboyuan-XD on 2016/5/20.
  3  *
  4  *   注意！如果需要显示图片位置的小圆点标识则必须按照demo中的格式书写！
  5  *   notice! If you need to display a small dot image location identification must be written in accordance with the format of the demo!
  6  */
  7 
  8 window.onload = (function () {
  9     var banner_container = document.getElementsByClassName('banners-container')[0];  //大banner图片床
 10     var next = document.getElementsByClassName('next')[0];
 11     var prev = document.getElementsByClassName('prev')[0];
 12     var buttons = document.getElementsByClassName('buttons')[0].getElementsByTagName('span');  //小圆点标识
 13 
 14     slideImg(banner_container, next, prev, buttons, 3, 3000, 26);  //参数说明见功能实现↓
 15 });
 16 
 17 
 18 
 19 
 20 /**功能实现********************功能实现***********************功能实现********************功能实现*********************功能实现****************************************************/
 21 
 22 //参数说明：                                      // Parameter Description:
 23 // container:图片床；                             // Container: your Photos on it;
 24 // btn_next, btn_prev:切换按钮；                  // Btn_next, btn_prev: toggle button(next&prev);
 25 // small_dots：小圆点标识;                        // Small_dots: small dot mark which picture now on focus;
 26 // img_num：图片数量（不包括前后的附图）;           // Img_num: how many pictures you have.(not including the first one and last one figures pictures);
 27 // move_speed:图片移动速度(数值越小越快！);        // Move_speed: image moving speed (the smaller the value, the faster!);
 28 function slideImg(container, btn_next, btn_prev, small_dots, img_num, auto_move_interval, move_speed) {
 29     var index = 1; //当前图片下小圆点标识  //current picture identification dot
 30     var img_width = -parseInt(container.style.left); //每张图片宽
 31     var timer = null;
 32     var animated = false; //判断是否移动完成  //To determine whether the move is complete
 33     var active_buttons = false;
 34     var active_btn_next = false;
 35     var active_btn_prev = false;
 36     var active_auto_move = false;
 37 
 38     if (typeof(container) != 'object') {
 39         alert("图片床参数传入错误！");
 40         return;
 41     }
 42     if (typeof(btn_next) == 'object') active_btn_next = true;
 43     if (typeof(btn_prev) == 'object') active_btn_prev = true;
 44     if (typeof (small_dots) == 'object') active_buttons = true;
 45     if (typeof(img_num) != 'number') {
 46         alert("parameter \"img_num\" is not right！");
 47         return;
 48     }
 49     if (typeof(auto_move_interval) == 'number') active_auto_move = true;
 50     if (typeof(move_speed) != 'number') {
 51         move_speed = 20;
 52         alert("ERROR:Function \"slideImg()\", parameter \"move_speed\" is not right！已自动修正为20！快谢谢我为你挽救了一切，走上人生巅峰，赢取白富美。哈哈哈哈！ -zby")
 53     }
 54 
 55     //移动图片床
 56     function animate(offset) {
 57         if (offset == 0) {
 58             return;
 59         }
 60         animated = true;
 61         var auto_move_interval = 10;  //每次移动间隔时间
 62         var new_left = parseInt(container.style.left) + offset;  //目标图片对应的left值  //Target image corresponding to the left value
 63 
 64         //平滑移动函数
 65         var move = function () {
 66             var cur_left = parseInt(container.style.left);    //当前left值
 67             var move_spacing = (new_left - cur_left) / move_speed;     //移动间隔（逐渐减小，实现平滑移动）//Movement interval (gradually reduced, to achieve a smooth movement)
 68             move_spacing = move_spacing > 0 ? Math.ceil(move_spacing) : Math.floor(move_spacing); //速度取整
 69             //当速度大于0且当前left值小于目标left值时，向右移动图片床        // 当速度小于0且当前left值大于目标left值时，向左移动图片床
 70             if ((move_spacing > 0 && parseInt(container.style.left) < new_left) || (move_spacing < 0 && parseInt(container.style.left) > new_left)) {
 71                 container.style.left = parseInt(container.style.left) + move_spacing + 'px';
 72                 setTimeout(move, auto_move_interval);
 73             }
 74             else {
 75                 //移动完成
 76                 container.style.left = new_left + 'px';
 77                 if (new_left > -img_width) {
 78                     container.style.left = -img_width * img_num + 'px';
 79                 }
 80                 if (new_left < -img_width * img_num) {
 81                     container.style.left = -1180 + 'px';
 82                 }
 83                 animated = false;
 84             }
 85         };
 86         //入口  //Entrance
 87         move();
 88     }
 89 
 90 
 91     //右点击，左点击
 92     btn_next.onclick = (function () {
 93         if (!active_btn_next) return;
 94 
 95         //判断，如果移动未完成则不进行下一次移动。
 96         if (animated) {
 97             return;
 98         }
 99         animate(-img_width);
100         //小圆点标识更新  //update small dot
101         if (index == img_num) index = 1;
102         else  index += 1;
103         showButton();
104     });
105     btn_prev.onclick = (function () {
106         if (!active_btn_prev) return;
107 
108         if (animated) {
109             return;
110         }
111         animate(img_width);
112         if (index == 1) index = img_num;
113         else  index -= 1;
114         index -= 1;
115         showButton();
116     });
117 
118 
119     //点亮，熄灭小圆点
120     function showButton() {
121         if (!active_buttons) return;
122 
123         //熄灭过去圆点
124         for (var i = 0; i < small_dots.length; i++) {
125             if (small_dots[i].className == 'on') {
126                 small_dots[i].className = '';
127                 break;
128             }
129         }
130         //点亮当前小圆点
131         small_dots[index - 1].className = 'on';
132     }
133 
134     //点击小圆点切换图片   //Click the dots to change images
135     for (var i = 0; i < small_dots.length; i++) {
136         if (!active_buttons) return;
137 
138         small_dots[i].onclick = (function () {
139             if (this.className == 'on' || animated) return;
140             var targetIndex = parseInt(this.getAttribute('index'));
141             var offset = -img_width * (targetIndex - index);
142             index = targetIndex;
143             animate(offset);
144             showButton();
145         });
146     }
147 
148 
149     //自动轮播  //auto play
150     function play() {
151         if (!active_auto_move) return;
152 
153         timer = setTimeout(function () {
154             if (animated) {
155                 return;
156             }
157             animate(-img_width);
158             if (index == img_num) index = 1;
159             else  index += 1;
160             showButton();
161             play();
162         }, auto_move_interval);
163     }
164 
165     function stop() {
166         clearTimeout(timer);
167     }
168 
169     //鼠标移入暂停轮播
170     container.onmouseover = stop;
171     container.onmouseout = play;
172     //自动轮播入口 //auto play entrance
173     play();
174 }

posted @ 2016-05-20 10:50 Dennis_XD 阅读(6166) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

DennisXD

practice makes perfect

原生js图片渐变轮播

原生js实现的图片轮播左右滑动效果函数封装

方便以后需要的时候拿出来复用。适合新手学习使用。

公告

DennisXD

practice makes perfect

原生js图片渐变轮播

原生js实现的图片轮播左右滑动效果函数封装

方便以后需要的时候拿出来复用。 适合新手学习使用。

公告

方便以后需要的时候拿出来复用。适合新手学习使用。