Js原生实现轮播图

来源：互联网发布：docker overlay网络编辑：程序博客网时间：2024/06/07 22:41

<style>    * {        margin: 0;        padding: 0;        list-style: none;        text-decoration: none;        font-family: "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif;    }        body {        background: #eee;    }        #Bigbox {        width: 720px;        height: 420px;        border: 1px solid #333;        margin: 60px auto;    }        #Box {        width: 700px;        height: 400px;        position: relative;        overflow: hidden;        top: 10px;        left: 10px;    }        #Ul {        height: 400px;        position: absolute;        top: 0;        left: 0;    }        #Ul li {        width: 700px;        height: 400px;        float: left;    }        #Left {        width: 60px;        height: 50px;        border-radius: 30%;        background: rgba(96, 96, 96, .5);        position: absolute;        top: 50%;        left: 0;        margin-top: -25px;        color: #fff;        line-height: 50px;        text-align: center;        cursor: pointer;        font-size: 20px;        display: none;    }        #Right {        width: 60px;        height: 50px;        border-radius: 30%;        background: rgba(96, 96, 96, .5);        position: absolute;        top: 50%;        right: 0;        margin-top: -25px;        color: #fff;        line-height: 50px;        text-align: center;        cursor: pointer;        font-size: 20px;        display: none;    }</style>

<div id="Bigbox">        <div id="Box">            <ul id="Ul">                <li>                    1<img src="img/1.jpg" width="100%" height="100%">                </li>                <li>                    2<img src="img/2.jpg" width="100%" height="100%">                </li>                <li>                    3<img src="img/3.jpg" width="100%" height="100%">                </li>                <li>                    4<img src="img/4.jpg" width="100%" height="100%">                </li>                <li>                    5<img src="img/5.jpg" width="100%" height="100%">                </li>                <li>                    6<img src="img/6.jpg" width="100%" height="100%">                </li>                <li>                    7<img src="img/7.jpg" width="100%" height="100%">                </li>                <li>                    8<img src="img/8.jpg" width="100%" height="100%">                </li>                <li>                    9<img src="img/9.jpg" width="100%" height="100%">                </li>                <li>                    10<img src="img/10.jpg" width="100%" height="100%">                </li>            </ul>            <div id="Left" onselectstart="return false">左</div>            <div id="Right" onselectstart="return false">右</div>        </div> </div>

<script>    window.onload = function() {            var n = 0;            var timer = null;            var timer1 = null;            var timer2 = null;            var timer3 = null;            var oDiv = document.getElementById('Box')            var oUl = document.getElementById('Ul')            var oLi = oUl.getElementsByTagName('li')                //获取div宽度            var oDivWidth = getStyle(oDiv, 'width').split('px')[0] //复制oUl的innerHTML            oUl.innerHTML += oUl.innerHTML                //设置ul宽度            oUl.style.width = oLi.length * oDivWidth + 'px'                //获取ul宽度            var oUlWidth = getStyle(oUl, 'width').split('px')[0] //封装获取非行间样式函数            function getStyle(obj, sName) {                if (obj.currentStyle) {                    return obj.currentStyle[sName];                } else {                    return getComputedStyle(obj, false)[sName];                }            }            //执行函数            clearInterval(timer3)            timer3 = setInterval(function() {                    Run()                }, 2000)                //封装运动函数            function Run() {                clearInterval(timer)                timer = setInterval(function() {                    n -= 20;                    oUl.style.left = n + 'px'                    if (n % oDivWidth == 0) {                        clearInterval(timer3)                        clearInterval(timer)                        clearInterval(timer1)                        timer1 = setTimeout(function() {                            Run()                        }, 2000)                    }                    if (n <= -oUlWidth / 2) {                        oUl.style.left = 0;                        n = 0;                        clearInterval(timer3)                        clearInterval(timer)                        clearInterval(timer1)                        timer1 = setTimeout(function() {                            Run()                        }, 2000)                    }                }, 30)            }            //鼠标移入停止滚动            oDiv.onmouseover = function() {                Left.style.display = 'block'                Right.style.display = 'block'                clearInterval(timer3)                clearInterval(timer2)                timer2 = setInterval(function() {                    if (n % oDivWidth == 0) {                        clearInterval(timer)                        clearInterval(timer1)                    }                }, 30)            }            //鼠标移出继续执行            oDiv.onmouseout = function() {                Left.style.display = 'none'                Right.style.display = 'none'                clearInterval(timer3)                clearInterval(timer2)                clearInterval(timer1)                timer1 = setTimeout(function() {                    Run()                }, 2000)            }            //向左            Left.onclick = function() {                //清除所有定时器                clearInterval(timer)                clearInterval(timer1)                clearInterval(timer2)                clearInterval(timer3)                timer = setInterval(function() {                    n -= 50;                    oUl.style.left = n + 'px'                    if (n % oDivWidth == 0) {                        clearInterval(timer)                    }                    if (n <= -oUlWidth / 2) {                        oUl.style.left = 0;                        n = 0;                    }                }, 30)            }            //向右            Right.onclick = function() {                clearInterval(timer)                clearInterval(timer1)                clearInterval(timer2)                clearInterval(timer3)                if (n == 0) {                    n = -oUlWidth / 2                }                clearInterval(timer)                timer = setInterval(function() {                    n += 50;                    oUl.style.left = n + 'px'                    if (n % oDivWidth == 0) {                        clearInterval(timer)                    }                }, 30)            }        }</script>

如有错误欢迎评论纠正谢谢！

0 0