js焦点轮播图(网摘)

简介:

汇集网上焦点轮播图的实现方式,自己试了下,不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效,不太明白,最后两行代码中,为什么可以直接写stop和play。不用加括号调用函数么?求懂的大神指点!

所用知识点:

1.DOM操作

2.定时器

3.事件运用

4.Js动画

5.函数递归

6.无限滚动大法(可以用js实现一个假图的制作。不过说实话一直理解不了假图的作用原理)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<style>
     * {
         margin 0 ;
         padding 0 ;
 
     }
 
     a {
         text-decoration none ;
     }
 
     body {
         padding 20px ;
     }
 
     #container {
         width 600px /*这里600x400是图片的宽高*/
         height 400px ;
         border 3px  solid  #333 ;
         overflow hidden /*隐藏溢出的图片,因为图片左浮动,总宽度为4200*/
         position relative ;
     }
 
     #list {
         width 4200px /*这里设置7张图片总宽度*/
         height 400px ;
         position absolute /*基于父容器container进行定位*/
         z-index 1 ;
     }
 
     #list img {
         float left ;
         width : 610px ;
     }
 
     #buttons {
         position absolute ;
         height 10px ;
         width 100px ;
         z-index 2 /*按钮在图片的上面*/
         bottom 20px ;
         left 250px ;
     }
 
     #buttons span {
         cursor pointer ;
         float left ;
         border 1px  solid  #fff ;
         width 10px ;
         height 10px ;
         border-radius:  50% ;
         background #333 ;
         margin-right 5px ;
     }
 
     #buttons .on {
         background : orangered;  /*选中的按钮样式*/
     }
 
     .arrow {
         cursor pointer ;
         display none /*左右切换按钮默认先隐藏*/
         line-height 39px ;
         text-align center ;
         font-size 36px ;
         font-weight bold ;
         width 40px ;
         height 40px ;
         position absolute ;
         z-index 2 ;
         top 180px ;
         background-color : RGBA( 0 0 0 , . 3 );
         color #fff ;
     }
 
     .arrow:hover {
         background-color : RGBA( 0 0 0 , . 7 );
     }
 
     #container:hover .arrow {
         display block /*当鼠标放上去容器上面就显示左右切换按钮*/
     }
 
     #prev {
         left 20px ;
     }
 
     #next {
         right 20px ;
     }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< div  id = "container" >
     < div  id = "list"  style = "left: -600px;" >
         < img  src = "5.jpg"  alt = "1" />
         < img  src = "1.jpg"  alt = "1" />
         < img  src = "2.jpg"  alt = "2" />
         < img  src = "3.jpg"  alt = "3" />
         < img  src = "4.jpg"  alt = "4" />
         < img  src = "5.jpg"  alt = "5" />
         < img  src = "1.jpg"  alt = "5" />
     </ div >
     < div  id = "buttons" >
         < span  index = "1"  class = "on" ></ span >
         < span  index = "2" ></ span >
         < span  index = "3" ></ span >
         < span  index = "4" ></ span >
         < span  index = "5" ></ span >
     </ div >
     < a  href = "javascript:void(0);"  id = "prev"  class = "arrow" >&lt;</ a >
     < a  href = "javascript:void(0);"  id = "next"  class = "arrow" >&gt;</ a ></ div >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<script>
         window.onload =  function (){
             var  container=document.getElementById( 'container' );
             var  list=document.getElementById( 'list' );
             var  buttons=document.getElementById( 'buttons' ).getElementsByTagName( 'span' );
             var  next=document.getElementById( 'next' );
             var  prev=document.getElementById( 'prev' );
             var  index=1;
 
             var  len=5; //图片的数量
             var  animated= false ; //用于判断切换是否进行
             var  interval=3000;  //自动播放定时器的秒数,3秒
             var  timer;  //定时器
//            切换动画
             function  animate(offset){
                 animated= true //切换进行中
                 var  time=300;  //位移总时间
                 var  inteval=10;  //位移间隔时间
                 var  speed=offset/(time/inteval);  //每次位移量
                 var  newLeft=parseInt(list.style.left)+offset;
                 var  go= function (){
                     if ((speed<0&&parseInt(list.style.left)>newLeft)||(speed>0&&parseInt(list.style.left)>newLeft)){
                         list.style.left=parseInt(list.style.left)+speed+ 'px' ;
                         setTimeout(go,inteval);
                     } else {
                         animated= false ;
                         list.style.left=newLeft+ 'px' ;
                         if (newLeft<-3000){
                             list.style.left=-600+ 'px' ;
                         }
                         if (newLeft>-600){
                             list.style.left=-3000+ 'px' ;
                         }
                     }
                 }
                 go();
                 /*var newLeft=parseInt(list.style.left)+offset;
                 list.style.left=newLeft+'px';
                 if(newLeft<-3000){
                     list.style.left=-600+'px';
                 }
                 if(newLeft>-600){
                     list.style.left=-3000+'px';
                 }*/
             }
 
//            为按钮添加样式
             function  showButton(){
                 for ( var  i=0;i<buttons.length;i++){
                     if (buttons[i].className== 'on' ){
                         buttons[i].className= '' ;
                         break ;
                     }
                 }
                 buttons[index-1].className= 'on' ;
             }
             next.onclick= function (){
                 if (animated){
                     return ;
                 }
                 if (index==5){
                     index=1;
                 } else {
                     index+=1;
                 }
                 animate(-600);
                 showButton();
             }
 
             prev.onclick= function (){
                 if (animated){
                     return ;
                 }
                 if (index==1){
                     index=5;
                 } else {
                     index-=1;
                 }
                 animate(600);
                 showButton();
             }
 
//            通过循环为按钮添加点击事件
             for ( var  i=0;i<buttons.length;i++){
                 buttons[i].onclick= function (){
                     if (animated){
                         return ;
                     }
//                    当继续点击当前按钮的时候,不进行切换
                     if ( this .className ==  'on' ){
                         return ;
                     }
//                    通过获取按钮标签的自定义属性Index 得到索引值,再计算差值
                     var  myIndex = parseInt( this .getAttribute( 'index' ));
                     //真正的偏移量
                     var  offset = -600*(myIndex-index);
                     animate(offset);
                     index=myIndex;
                     showButton();
                 }
//                自动播放
                 function  play(){
                     timer=setTimeout( function (){
                         next.onclick();
                         play();
                     },interval)
                 }
                 function  stop(){
                     clearTimeout(timer);
                 }
                 container.onmouseover=stop;
                 container.onmouseout=play;
 
                 play();
             }
         }
     </script>



本文转自 蓓蕾心晴 51CTO博客,原文链接:http://blog.51cto.com/beileixinqing/1903304,如需转载请自行联系原作者
相关文章
|
24天前
|
前端开发 JavaScript 索引
|
1月前
|
JavaScript 前端开发
原生js做轮播图
原生js做轮播图
10 0
|
24天前
|
JavaScript 前端开发
如何使用JS实现轮播图
如何使用JS实现轮播图
18 0
|
24天前
|
移动开发 JavaScript HTML5
JS实现轮播图(一看就懂逻辑清晰)
JS实现轮播图(一看就懂逻辑清晰)
|
24天前
|
JavaScript 前端开发
jsjs原生 JavaScript轮播图 渐变淡入淡出
jsjs原生 JavaScript轮播图 渐变淡入淡出
|
1月前
|
JavaScript 前端开发
|
1月前
|
JavaScript 前端开发
制作JS焦点轮播图
制作JS焦点轮播图
|
2月前
|
JavaScript
【升级玩法】js用push、unshift、shift、pop或splice实现5张卡片(可以自由定义更多)轮播图效果banner、swiper
【升级玩法】js用push、unshift、shift、pop或splice实现5张卡片(可以自由定义更多)轮播图效果banner、swiper
|
2月前
|
JavaScript 前端开发
JS如何实现竖屏轮播图
JS如何实现竖屏轮播图
16 0
|
2月前
|
JavaScript
js轮播图
js轮播图
10 0

相关产品

  • 云迁移中心