js焦点轮播图

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

所用知识点:

1.DOM操作

2.定时器

3.事件运用

4.Js动画

5.函数递归

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

<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>
<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>
<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>
<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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Spring相关

使用vue模拟购物车小球动画

23720
来自专栏一个爱吃西瓜的程序员

Web前端基础【2】--CSS基础

CSS指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题:即使同一个HTML文档也能表现出外观...

36160
来自专栏用户2442861的专栏

HTML/CSS基础知识学习笔记

http://www.cnblogs.com/scue/p/4276339.html

18310
来自专栏Android常用基础

自定义View(九)-View的工作原理- View的layout()和draw()

上一节我们将View的测量流程理的差不多了,这篇我们来看下View的剩下的2大流程layout(布局)和draw(绘制)。相对测量来说,布局与绘制就简单了许多,...

12820
来自专栏Java后端技术

CSS总结

  1.继承:子元素继承父元素的某些样式(因为有些元素有默认值,所以它们就不用继承父元素的)。

9610
来自专栏我的博客

安卓开发之简单组件使用

一、TextView组件(文本框) <TextView android:id=”@+id/firstText” android:text=”第一行“ andro...

29160
来自专栏学海无涯

Android开发之自定义View(一)

Android常见的自定义控件有三种方式: 继承View 继承原有的控件,在原有控件的基础上进行修改 重新拼装组合 今天先来简单说一说第一种也是最复杂的一种~~...

30670
来自专栏逸鹏说道

逆天通用水印支持Winform,WPF,Web,WP,Win10。支持位置选择(9个位置 ==》[X])

好几天没上QQ了,今天上了个QQ,,额....额...貌似消息还挺多,没及时回复的还请见谅~~刚好昨天无聊把水印这快封装出来了,支持图片水印,文字水印,索引图...

36660
来自专栏黑泽君的专栏

day02_css学习笔记

9220
来自专栏Python Web学习记录及整理

CSS学习记录及整理

<!DOCTYPE ”此文仅为个人学习的知识梳理,权威且更详细的内容请查阅w3school。“>

45480

扫码关注云+社区

领取腾讯云代金券