Js原生轮播图

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport">
    <title>Document</title>
    <link rel="stylesheet" href=""/>
    <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>
</head>
<body>
<div id="Bigbox">
    <div id="Box">
        <ul id="Ul">
            <li>
                <img src="img/1.jpg" width="100%" height="100%">
            </li>
            <li>
                <img src="img/2.jpg" width="100%" height="100%">
            </li>
            <li>
                <img src="img/3.jpg" width="100%" height="100%">
            </li>
            <li>
                <img src="img/4.jpg" width="100%" height="100%">
            </li>
            <li>
                <img src="img/5.jpg" width="100%" height="100%">
            </li>
            <li>
                <img src="img/6.jpg" width="100%" height="100%">
            </li>
            <li>
                <img src="img/7.jpg" width="100%" height="100%">
            </li>
            <li>
                <img src="img/8.jpg" width="100%" height="100%">
            </li>
            <li>
                <img src="img/9.jpg" width="100%" height="100%">
            </li>
            <li>
                <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)
                }
                Wif(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>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » Js原生轮播图

分享到:更多 ()

发表评论 0