图片首尾平滑轮播(JS原生方法—节流)<原创>

最新推荐文章于 2022-11-29 20:30:00 发布

weixin_30410119

最新推荐文章于 2022-11-29 20:30:00 发布

阅读量397

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/tainlx/p/7675308.html

本文介绍了一种使用原生JS实现的图片首尾平滑轮播方法，通过节流技术控制图片切换速度，适用于多种网页布局。

图片首尾平滑轮播(JS原生方法—节流)<原创>

首先给出HTML代码，要注意轮播图片表(#list)末尾加上第一个图片1.jpg，在首部加上最后一个图片5.jpg。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>首尾轮播</title>
 6     <link rel="stylesheet" href="首尾轮播.css">
 7 <script src="首尾轮播.js"></script>
 8 </head>
 9 <body>
10     <div id="container">
11         <div id="list" style="left: -500px">
12             <div><a href="#"><img src="../imgs/5.jpg" alt=""></a></div>
13             <div><a href="#"><img src="../imgs/1.jpg" alt=""></a></div>
14             <div><a href="#"><img src="../imgs/2.jpg" alt=""></a></div>
15             <div><a href="#"><img src="../imgs/3.jpg" alt=""></a></div>
16             <div><a href="#"><img src="../imgs/4.jpg" alt=""></a></div>
17             <div><a href="#"><img src="../imgs/5.jpg" alt=""></a></div>
18             <div><a href="#"><img src="../imgs/1.jpg" alt=""></a></div>
19         </div>
20 
21         <div class="arrow" id="prev">&lt;</div>
22         <div class="arrow" id="next">&gt;</div>
23 
24 
25     </div>        
26 
27 </body>    
28 
29 </html>

接下来给出css和js代码，大家可以酌情根据图片的大小、数量、宽度，调整container、list的参数，这也是封装JS所要考虑的参数。

 1 *{
 2     margin: 0;
 3     padding: 0;
 4 }
 5 
 6 #container{
 7     height: 400px;
 8     width:  500px;
 9     margin: 0 auto;
10     position: relative;
11     overflow: hidden;
12     border: 1px solid black;
13 }
14 
15 #list>div {
16     float: left;
17 }
18 #list{
19     position: absolute; 
20     height: 400px;
21     width:  3600px;
22     
23 }
24 
25 #list img{
26     height: 400px;
27     width:  500px;
28 }
29 .arrow {
30     user-select:none;
31     position: absolute;
32     top:150px;
33     z-index: 2;
34     background-color: #aaa;
35     height: 100px;
36     width:  80px;
37     cursor: pointer;
38     opacity: 0.5;
39     display: none;
40     line-height: 100px;
41     text-align: center;
42     color: #222;
43     font-size: 3em;
44 
45 }
46 #container:hover .arrow{
47     display: block;
48 }
49  #prev{
50     left:20px;
51 }
52 
53  #next{
54     right: 20px;
55 }

在JS中，我们可以通过改变speed变量来控制图片切换的速度....这里用的是 element.style.transition来控制的过渡效果.

 1 window.onload=function(){
 2     var container = document.getElementById('container');
 3     var list = document.getElementById('list');//获取图片容器
 4     var prev = document.getElementById('prev');//向前按钮
 5     var next = document.getElementById('next');//向后按钮
 6     var nowP = 1;    //显示位置
 7     var judge = null;    //执行权
 8     var speed = 0.1; // 切换速度  秒
 9     prev.onclick=function(){
10         if(!judge){
11              judge = setTimeout(function(){
12                  if(nowP==1){setTimeout(function(){
13                      list.style.transition="left 0s";
14                     list.style.left = "-2500px";　
15                     nowP = 5;},speed*1000);} //当到达图片表左边缘时与动画同步切换 
16                  list.style.transition = "left "+speed+"s";
17                 move(500);
18                 nowP--;
19                 judge = null;
20             },speed*1000);
21         }
22     };
23     next.onclick=function(){
24         if(!judge){             
25              judge = setTimeout(function(){
26                  if(nowP==5){setTimeout(function(){
27                      list.style.transition="left 0s";
28                     list.style.left = "-500px"; 
29                     nowP = 1;},speed*1000);} //当到达图片表右边缘时与动画同步切换 
30                 list.style.transition = "left "+speed+"s";
31                 move(-500);
32                 nowP++;
33                 judge = null;
34             },speed*1000);
35         }
36 
37     };
38 
39     function move(num){
40         var term = parseInt(list.style.left) + num ; 
41         list.style.left = term+"px";
42     }
43 
44     var roll= setInterval(function(){
45         next.onclick();
46     },2000);
47 
48     container.onmouseenter=function(){
49         clearInterval(roll);
50     };
51 
52     container.onmouseleave=function()
53         {
54         roll=setInterval(function(){
55         next.onclick();
56         },2000);
57     };
58 
59     
60 };