动态轮播

来源：互联网发布：数据分析 ppt 编辑：程序博客网时间：2024/05/16 04:53
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        * {            margin: 0;            padding: 0;        }        .container {            cursor: pointer;            margin-top: 40px;            outline: 1px solid red;            height: 454px;        }        .inner {            outline: 1px solid red;            margin: auto;            width: 730px;            height: 454px;            position: relative;        }        #back {            position: absolute;            width: 40px;            height: 105px;            left: 0;            top: 160px;        }        #forward {            position: absolute;            width: 40px;            height: 105px;            right: 0;            top: 160px;        }        .point-index {            position: absolute;            left: 340px;            top: 420px;        }        .point-index>li {            background-color: black;            color: white;            border-radius: 50%;            width: 20px;            height: 20px;            display: inline-block;            text-align: center;            margin: 3px;        }    </style></head><body>    <div class="container">        <div class="inner">            //设置一张加载时的默认图片            <img class="main-img" src="first.jpg" />            <a href="javascript: void(0)"><img id="back" src="back.png"></a>            <a href="javascript: void(0)"><img id="forward" src="forwar.png"></a>            <ul class="point-index"></ul>        </div>    </div></body><script type="text/javascript">    //元素对象定义    var containerEle = document.getElementsByClassName("container")[0];    var innerEle = document.getElementsByClassName("inner")[0];    var mainImgEle = document.getElementsByClassName("main-img")[0];    var backEle = document.getElementById("back");    var forwardEle = document.getElementById("forward");    var pointIndexEle = document.getElementsByClassName("point-index")[0];    //定义一个数组，把要进行轮播的图片放入数组中    var imgsArr = ["first.jpg", "second.jpg", "third.jpg", "third.jpg", "third.jpg"];    var count = 1;    //定义方法    function initPointIndexEle() {        //创建园点        for (var i = 0; i < imgsArr.length; i++) {            pointIndexEle.innerHTML += "<li>" + (i + 1) + "</li>";        }        //鼠标移动到圆点换图片        for (var j = 0; j < imgsArr.length; j++) {            var liEle = pointIndexEle.childNodes[j];            liEle.onmouseover = function() {                this.style.backgroundColor = "red";                count = parseInt(this.innerHTML) - 1;                mainImgEle.setAttribute("src", imgsArr[count]);            }            liEle.onmouseout = function() {                this.style.backgroundColor = "black";            }        }        //动态居中        var len = pointIndexEle.childNodes.length;        var ulWidth = undefined;        var mainImgWidth = undefined;        for (var k = 0; k < len; k++) {            if (pointIndexEle.childNodes[k].currentStyle) {                ulWidth = pointIndexEle.childNodes[k].currentStyle.width;            } else if (document.defaultView) {                ulWidth = document.defaultView.getComputedStyle(pointIndexEle.childNodes[k], null).width;            }        }        if (mainImgEle.currentStyle) {            mainImgWidth = document.getElementsByClassName("inner")[0].currentStyle.width;        } else if (document.defaultView) {            mainImgWidth = document.defaultView.getComputedStyle(document.getElementsByClassName("inner")[0], null).width;        }        pointIndexEle.style.left = (parseInt(mainImgWidth) - (parseInt(ulWidth) * len) - (3 * 2 * len)) / 2 + "px";    }    function autoMove() {        if (count === 3) count = 0;        mainImgEle.setAttribute("src", imgsArr[count++]);    }    //调用    initPointIndexEle();    var timer = setInterval("autoMove()", 1500);    //绑定时间    innerEle.onmouseover = function() {        clearInterval(timer);    }    innerEle.onmouseout = function() {        timer = setInterval("autoMove()", 1500);    }    forwardEle.onclick = function() {        if (count === 2) count = -1;        mainImgEle.setAttribute("src", imgsArr[++count]);    }    backEle.onclick = function() {        if (count === 0) count = 3;        mainImgEle.setAttribute("src", imgsArr[--count]);    }</script></html>
0 0