原生Javascript实现图片轮播效果

Posted ZinCode

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生Javascript实现图片轮播效果相关的知识,希望对你有一定的参考价值。

首先引入js运动框架

 1 function getStyle(obj,name){
 2         if(obj.currentStyle){
 3             return obj.currentStyle[name];    
 4         } else{
 5             return getComputedStyle(obj,false)[name];
 6         }
 7     }
 8 
 9 function startMove(obj, json, fnEnd) {
10     clearInterval(obj.timer);
11     obj.timer = setInterval(function() {
12         var bStop = true;
13         for (var attr in json) {
14             var cur = 0;
15             if (attr == "opacity") {
16                 cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
17             } else {
18                 cur = parseInt(getStyle(obj, attr))
19             }
20             var speed = (json[attr] - cur) / 10;
21             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
22             if (cur !== json[attr]) {
23                 bStop = false;
24             };
25             if (attr == "opacity") {
26                 obj.style.opacity = (speed + cur) / 100;
27                 obj.style.filter = \'alpha(opacity:\' + (speed + cur) + \')\';
28             } else {
29                 obj.style[attr] = cur + speed + \'px\';
30             }
31         }
32         if (bStop) {
33             clearInterval(obj.timer);
34             if (fnEnd) fnEnd();
35         }
36     }, 30)
37 }

然后写轮播小案例

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>淘宝轮播</title>
  7     <style>
  8     ul,
  9     li {
 10         list-style: none;
 11         margin: 0;
 12         padding: 0;
 13     }
 14     
 15     #wrap {
 16         width: 400px;
 17         height: 225px;
 18         margin: 0 auto;
 19         position: relative;
 20         overflow: hidden;
 21     }
 22     
 23     li {
 24         float: left;
 25     }
 26     
 27     #tips li {
 28         margin: 5px;
 29         border: 1px solid #f60;
 30         width: 20px;
 31         height: 20px;
 32         line-height: 20px;
 33         text-align: center;
 34         color: white;
 35         cursor: pointer;
 36     }
 37     
 38     .active {
 39         background: #f60;
 40     }
 41     
 42     img {
 43         vertical-align: top;
 44         width: 400px;
 45     }
 46     
 47     #content {
 48         width: 2400px;
 49         position: absolute;
 50         left: -1200px;
 51     }
 52     
 53     #content li {
 54         float: left;
 55     }
 56     
 57     #tips {
 58         position: absolute;
 59         right: 20px;
 60         bottom: 5px;
 61     }
 62     </style>
 63 </head>
 64 
 65 <body>
 66     <div id="wrap">
 67         <ul id="content">
 68             <li><img src="img3/1.jpg" alt=""></li>
 69             <li><img src="img3/2.jpg" alt=""></li>
 70             <li><img src="img3/3.jpg" alt=""></li>
 71             <li><img src="img3/4.jpg" alt=""></li>
 72             <li><img src="img3/5.jpg" alt=""></li>
 73             <li><img src="img3/6.jpg" alt=""></li>
 74         </ul>
 75         <ul id="tips">
 76             <li>1</li>
 77             <li>2</li>
 78             <li>3</li>
 79             <li>4</li>
 80             <li>5</li>
 81         </ul>
 82     </div>
 83     <script src="move.js"></script>
 84     <script>
 85     var wrap = document.getElementById(\'wrap\');
 86     var content = document.getElementById(\'content\');
 87     var tips = document.getElementById(\'tips\');
 88     var aLi = tips.getElementsByTagName(\'li\');
 89     var now = 0;
 90     //var 
 91     for (var i = 0; i < aLi.length; i++) {
 92         aLi[0].className = \'active\';                //把初始状态定义好
 93         content.style.left = 0 +\'px\';
 94         aLi[i].index = i; //自定义属性
 95         aLi[i].onclick = function() {
 96             now = this.index;
 97             play();
 98         }
 99     }
100 
101     function play() {
102         for (var j = 0; j < aLi.length; j++) {
103             aLi[j].className = \'\';
104         }
105         aLi[now].className = \'active\';
106 
107         //this.index = now;                         //反过来写就不对了大兄弟
108         //content.style.left = -400 * this.index + \'px\';
109         startMove(content, {
110             left: -400 * now, //你还真别说,json格式就是这么写的
111         });
112     }
113 
114     function autoPlay() {
115         now++;
116         if (now == aLi.length) {
117             now = 0;
118         }
119         play();
120     }
121 
122     var timer = setInterval(autoPlay, 2000);
123     wrap.onmouseover = function(){                  //这里如果把事件绑定到ul上的话,那么鼠标移入,下面对饮的li会不起作用,
124         clearInterval(timer);                       //因为li的层级比较高,所以应该把事件绑定到大的div上
125     }
126     wrap.onmouseout = function(){
127         timer = setInterval(autoPlay,2000);
128         //setInterval(autoPlay,2000);   不能这么写,凡是开的定时器,必须得赋值,要不然总会多开一个定时器,导致速度加快
129     }
130     </script>
131 </body>
132 
133 </html>

最终效果如下图,可实现鼠标翻页,鼠标悬停后停止轮播,

以上是关于原生Javascript实现图片轮播效果的主要内容,如果未能解决你的问题,请参考以下文章

原生JavaScript实现无缝轮播图

js原生 JavaScript轮播图渐变淡入淡出效果实现(附代码)

零基础也能学会,原生JS实现图片轮播(附源码,拿去即用)

零基础也能学会,原生JS实现图片轮播(附源码,拿去即用)

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

原生javascript之实战 轮播图