设为首页 加入收藏

TOP

图片首尾平滑轮播(JS原生方法—节流)<原创>(一)
2017-10-16 18:19:17 】 浏览:8921
Tags:图片 首尾 平滑 原生 方法 节流 < 原创 >

首先给出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     ne
首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇jquery一键控制checkbox全选,反.. 下一篇canvas鼠标拖动绘制图形

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

最新文章

热门文章

C 语言

C++基础

windows编程基础

linux编程基础

C/C++面试题目