html+css+js实现原生轮播特效

html+css+js实现原生轮播特效

index.html

<!DOCTYPE html>
<html>
<head>
    <title>lunbo</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./css/lunbo.css">
    <script type=text/javascript src="./js/b.js"></script>
</head>
<body>
    <div id="container">
        <div id="list" style="left: -500px;">
            <img src="./imgs/e.jpg" alt="5"/>
            <img src="./imgs/a.jpg" alt="1"/>
            <img src="./imgs/b.jpg" alt="2"/>
            <img src="./imgs/c.jpg" alt="3"/>
            <img src="./imgs/d.jpg" alt="4"/>
            <img src="./imgs/e.jpg" alt="5"/>
            <img src="./imgs/a.jpg" alt="1"/>
        </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:;" id="back" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>
</body>
</html>

lunbo.css

html,body{ 
        margin: 0; 
        padding: 0; 
}

#container { 
        width: 500px;
        height: 500px; 
        border: 3px solid #333; 
        overflow: hidden; 
        position: relative;
        margin:auto;
}

#list { width: 3500px; 
        height: 500px; 
        position: absolute; 
        z-index: 1;
}

#list img { 
        float: left;
}

#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;
}
window.onload=function() {
    var container = document.getElementById('container');
    var list = document.getElementById('list');
    var buttons = document.getElementById('buttons').getElementsByTagName('span');
    var back = document.getElementById('back');
    var next = document.getElementById('next');
    var index = 1;
    var len = 5;
    var animated = false;
    var interval =2500;
    var timer;



    function animate(offset) {
        if (offset == 0) {
            return;
        }
        animated = true;
        var time =100;
        var inteval =10;
        var speed = offset/(time/inteval);
        var left = parseInt(list.style.left) + offset;

        var go = function (){
            if ( (speed > 0 && parseInt(list.style.left) < left) 
                  || (speed < 0 && parseInt(list.style.left) > 
                 left)) {
                 list.style.left = parseInt(list.style.left) + 
                    speed + 'px';
                 setTimeout(go, inteval);
            }
            else {
                list.style.left = left + 'px';
                if(left>-100){
                        list.style.left = -500 * len + 'px';
                }
                if(left<(-500 * len)) {
                    list.style.left = '-500px';
                }
                animated = false;
            }
        }
        go();
    }


    function showButton() {
        for (var i = 0;i < buttons.length ; i++) {
            if( buttons[i].className == 'on'){
                buttons[i].className = '';
                break;
            }
        }
        buttons[index - 1].className = 'on';
    }

    function play() {
        timer = setTimeout(function () {
            next.onclick();
            play();
        }, interval);
    }
    function stop() {
        clearTimeout(timer);
    }

    next.onclick = function () {
        if(animated) {
            return;
        }
        if (index == 5) {
            index = 1;
        } 
        else {
            index += 1;
        }
        animate(-500);
        showButton();
    }
    back.onclick = function () {
        if (animated) {
            return;
        }
        if (index == 1) {
            index =5;
        }
        else {
             index -= 1;
        }
        animate(500);
        showButton();
    }
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function() {
            if (animated) {
                return;
            }
            if(this.className == 'on') {
                return;
            }
            var myIndex = parseInt(this.getAttribute('index'));
            var offset = -500 * (myIndex - index);

            animate(offset);
            index = myIndex;
            showButton();

        }
    }


    container.onmouseover =stop;
    container.onmouseout =play;

    play();

}

效果如图：轮播效果图

posted @ 2017-09-22 22:00  Newtol  阅读(302)  评论(0)  编辑  收藏  举报