JavaScript首屏轮播

来源：互联网发布：ubuntu 16.04 双系统编辑：程序博客网时间：2024/06/03 18:50
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{ margin: 0; padding: 0}        a{ text-decoration: none;}        .aox{ width: 1080px; height: 432px; margin: 100px auto; position: relative; overflow: hidden;}        .Box{ width: 5400px; height: 432px; position: absolute; z-index: 1;}        .Box img{ width: 1080px; height: 432px; float: left;}        .but{ position: absolute; right: 200px; bottom: 30px; z-index: 2;}        .but span{ width: 20px; height: 20px; background-color: #1F84FF; color: white; display: inline-block; border-radius: 50%; text-align: center; line-height: 20px;}        .but span.on{ background-color: #2dbe60;}        .arrow{ position: absolute; top: 200px; font-size: 50px; z-index: 2; color: #1F84FF; display: none;}        .aox:hover .arrow{ display: block; background-color: rgba(0,0,0,0.5)}        .arrow_left{ left: 10px;}        .arrow_right{ right: 10px;}    </style></head><body>    <div class="aox">        <div class="Box" style=" left: -1080px">            <img src="img/3.png">            <img src="img/1.jpg">            <img src="img/2.jpg">            <img src="img/3.png">            <img src="img/1.jpg">        </div>        <div class="but">            <span class="on">1</span>            <span>2</span>            <span>3</span>        </div>        <a href="javascript:;" class="arrow arrow_left">&lt;</a>        <a href="javascript:;" class="arrow arrow_right">&gt;</a>    </div>    <script>        var Obox = document.querySelector(".Box");        var prev = document.querySelector(".arrow_left");        var next = document.querySelector(".arrow_right");        next.onclick = function () {            next_pic();        }        prev.onclick = function () {            prev_pic();        }        function next_pic () {            index++;            if(index>2){                index = 0;            }            showCurrentDot();            var newLeft;            if(Obox.style.left === '-4320px'){                newLeft = -2160;            }else{                newLeft = parseInt(Obox.style.left) - 1080;            }            Obox.style.left = newLeft + 'px';        }        function prev_pic () {            index--;            if(index<0){                index = 2;            }            showCurrentDot();            var newright;            if(Obox.style.left === '0px'){                newright = -2160;            }else{                newright = parseInt(Obox.style.left) + 1080;            }            Obox.style.left = newright + 'px';        }        var NextTime = null;        function AutoPlay() {            NextTime = setInterval(function () {                next_pic();            },2000)        }        AutoPlay();        var StopAox = document.querySelector(".aox");        StopAox.onmouseenter = function(){            clearInterval(NextTime);        }        StopAox.onmouseleave = function(){            AutoPlay();        }        var index = 0;        var But = document.querySelector(".but");        var Round = But.getElementsByTagName("span");//        alert(Round.length)        function showCurrentDot() {            for(var i = 0, len = Round.length; i<len; i++){                Round[i].className = "";            }            Round[index].className = "on";        }        for(var i = 0, len = Round.length; i<len; i++){            (function(i){                Round[i].onclick = function(){                    var ClickCite = index - i;                    if(index == 2 && parseInt(Obox.style.left) !== -3240){                        ClickCite = ClickCite - 3;                    }                    if(index == 0 && parseInt(Obox.style.left) !== -1080){                        ClickCite = 3 + ClickCite;                    }                    Obox.style.left = (parseInt(Obox.style.left) + ClickCite * 1080) + "px";                    index = i;                    showCurrentDot();                }            })(i);        }    </script></body></html>
阅读全文
0 0