js焦点轮播图(网摘)

技术小阿哥 2017-11-27

index list

汇集网上焦点轮播图的实现方式,自己试了下,不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效,不太明白,最后两行代码中,为什么可以直接写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>
    * {
        margin0;
        padding0;
 
    }
 
    a {
        text-decorationnone;
    }
 
    body {
        padding20px;
    }
 
    #container {
        width600px/*这里600x400是图片的宽高*/
        height400px;
        border3px solid #333;
        overflowhidden/*隐藏溢出的图片,因为图片左浮动,总宽度为4200*/
        positionrelative;
    }
 
    #list {
        width4200px/*这里设置7张图片总宽度*/
        height400px;
        positionabsolute/*基于父容器container进行定位*/
        z-index1;
    }
 
    #list img {
        floatleft;
        width:610px;
    }
 
    #buttons {
        positionabsolute;
        height10px;
        width100px;
        z-index2/*按钮在图片的上面*/
        bottom20px;
        left250px;
    }
 
    #buttons span {
        cursorpointer;
        floatleft;
        border1px solid #fff;
        width10px;
        height10px;
        border-radius: 50%;
        background#333;
        margin-right5px;
    }
 
    #buttons .on {
        background: orangered; /*选中的按钮样式*/
    }
 
    .arrow {
        cursorpointer;
        displaynone/*左右切换按钮默认先隐藏*/
        line-height39px;
        text-aligncenter;
        font-size36px;
        font-weightbold;
        width40px;
        height40px;
        positionabsolute;
        z-index2;
        top180px;
        background-color: RGBA(000, .3);
        color#fff;
    }
 
    .arrow:hover {
        background-color: RGBA(000, .7);
    }
 
    #container:hover .arrow {
        displayblock/*当鼠标放上去容器上面就显示左右切换按钮*/
    }
 
    #prev {
        left20px;
    }
 
    #next {
        right20px;
    }
</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,如需转载请自行联系原作者
登录 后评论
下一篇
弹性计算秉林
37人浏览
2020-07-08
相关推荐
手机端轮播图插件
1894人浏览
2016-05-11 10:35:03
Bootstrap-轮播图-No.9
922人浏览
2017-10-18 08:24:00
Bootstrap-轮播图-No.8
884人浏览
2017-10-18 08:24:00
Bootstrap-轮播图-No.7
809人浏览
2017-10-18 08:23:00
Bootstrap-轮播图-No.6
786人浏览
2017-10-18 08:23:00
Bootstrap-轮播图-No.5
865人浏览
2017-10-18 08:23:00
Bootstrap-轮播图-No.4
843人浏览
2017-10-18 08:22:00
Bootstrap-轮播图-No.3
815人浏览
2017-10-18 08:22:00
Bootstrap-轮播图-No.2
699人浏览
2017-10-18 08:21:00
轮播图插件myFocus使用
844人浏览
2016-04-24 14:32:00
0
0
0
941