首页手记轮播图的实现（其中包括自动动画，下方圆点动画，左右动画）

轮播图的实现（其中包括自动动画，下方圆点动画，左右动画）

标签：

Html/CSS JQuery

在这之前需要下载jQuery到本地，之后再页面引入即可~

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片轮播实现原理</title>
        <link rel="shortcut icon" href="img/4.jpg" />
    </head>
    <style>
    *{
        margin:0;padding:0;
    }
    #container{
        width: 739px;
        height:500px;
        margin:0 auto;
        overflow: hidden;
        position: relative;
    }
    #list{
        position: absolute;
        width: 3695px;
        height:500px;
    }
    #list img{
        float: left;
    }
    .arrow{
        position: absolute;
        width: 709px;
        height: 40px;
        font-size: 25px;
        line-height: 40px;
        left:0;
        top:250px;
        display:none;
        color: white;
        margin: 0 15px;
    }
    #left:hover, #right:hover{
        background: red;
    }
    #left{
        display: block;
        width: 20px;
        background: #009688a1;
        float: left;
    }
    #right{
        display: block;
        width: 20px;
        background: #009688a1;
        float:right;
    }
    #footer{
        position: absolute;
        width: 739px;
        height:30px;
        background: #009688a1;
        font-size: 10px;
        line-height: 30px;
        left:0;
        bottom:-30px;
        text-align: center;
        color: white;
    }
    a{
        display: inline-block;
        cursor: pointer;
    }
    span{
        display: inline-block;
        width: 30px;
        font-size: 20px;
        cursor: pointer;
        background: navajowhite;
    }
    .on{
        background:crimson;
    }
    </style>

    <body>
        <h1 align="center">图片轮播</h1>
        <div id="container">
            <div id="list" style="left: -739px;" >
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/lunbotu/3.jpg"/>
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/lunbotu/1.jpg"/>
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/lunbotu/2.jpg"/>
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/lunbotu/3.jpg"/>
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/lunbotu/1.jpg"/>

            </div>
            <div class="arrow">
                <a id="left">&lt;</a>
                <a id="right">&gt;</a>
            </div>
            <div id="footer">
                <span index="1" class="on">·</span>
                <span index="2">·</span>
                <span index="3">·</span>
            </div>
        </div>
    </body>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js"></script>
    <script>
        $('#container').hover(function(){
            $(this).find('#footer').stop().animate({bottom:0},200);
            $(this).find('.arrow').show(1);
        },function(){
            $(this).find('#footer').stop().animate({bottom:"-30px"},200);
            $(this).find('.arrow').hide(1);
        });
    </script>
    <script type="text/javascript">
        window.onload = function(){
            var container = document.getElementById('container');
            var leftButton = document.getElementById('left');
            var rightButton = document.getElementById('right');
            var list = document.getElementById('list');
            var footer = document.getElementById('footer').getElementsByTagName('span');
            var index = 1;
            var flag = false;//用于表示是否正在进行动画
            var timer; //设置自动播放的定时器

            function myanimate(offset){
                flag = true; 

                var newLeft = parseInt(list.style.left) + offset ;
                var time = 300;//总的位移时间
                var interval = 10;//位移间隔时间
                var speed = offset/(time/interval);

                function go(){
                    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,interval);
                    }   
                    else{
                        flag = false;
                        if(newLeft > -739){
                            list.style.left = -2217 +'px';
                        }
                        else if(newLeft < -2217){
                            list.style.left = -739 +'px';
                        }
                        else{
                            list.style.left = newLeft +'px';
                        }
                    }
                }
                go();
            }

            function showButton(){
                for(var i=0;i<footer.length;i++){
                    footer[i].className = '';
                }
                if(index <= 0){
                    index = 3;
                }else if(index >= 4){
                    index = 1;
                }
                footer[index-1].className = 'on';
            }

            leftButton.onclick = function(){
                if(!flag){
                    myanimate(739);
                    index += 1;
                    showButton();
                }

            }
            rightButton.onclick = function(){
                if(!flag){
                    myanimate(-739);
                    index -= 1;
                    showButton();
                }
            }
            for(var i=0;i<footer.length;i++){
                footer[i].onclick = function(){
                    var newIndex = parseInt(this.getAttribute('index'));
                    if(newIndex == index) return; //这个是表示如果点击的图标就是一开始显示的图标则什么都不做
                    if(!flag){
                        myanimate((newIndex-index)*(-739));
                        index = newIndex;
                        showButton();   
                    }

                };
            }

            function play(){
                timer = setInterval(function(){
                    leftButton.onclick();//出发左键的点击事件
                },1000);//1000是间隔的参数
            }

            function stop(){
                clearInterval(timer);
            }
            container.onmouseover = stop;
            container.onmouseout = play;

            play();
        }
    </script>

</html>

点击查看更多内容