js轮播图淡入淡出

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        ul,ol{ list-style: none;}
        .wrapper{
            width: 670px;
            height: 240px;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        ul{
            position:relative;
        }
        ul li{
            position:absolute;
            top:0;
            left:0;
        }
        ol{
            position: absolute;
            right: 0;
            bottom: 10px;
            width: 190px;
        }
        ol li{
            float: left;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            text-align: center;
            border-radius: 50%;
            cursor: default;
            background-color: #abc;
        }
        ol li.current{
            background-color: pink;
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <ul id="box">
            <li style="z-index: 6;" ><img src="images/1.jpg" alt=""/></li>
            <li style="z-index: 5;"><img src="images/2.jpg" alt=""/></li>
            <li style="z-index: 4;"><img src="images/3.jpg" alt=""/></li>
            <li style="z-index: 3;"><img src="images/4.jpg" alt=""/></li>
            <li style="z-index: 2;"><img src="images/5.jpg" alt=""/></li>
            <li style="z-index: 1;"><img src="images/6.jpg" alt=""/></li>
        </ul>
        <ol style="z-index: 10;" id="uu">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ol>
    </div>
</body>
</html>
<script src="../../sport2.js"></script>
<script type="text/javascript">
     var bt = document.getElementById("uu");
     var box = document.getElementById("box");
     var index = 0;//控制文字和图片对应
     var moveTimer = null;//控制图片运动
     var olist = bt.children;
     var ulist = box.children;
     moveTimer = setInterval(autoPlay,2000);
     
     function autoPlay(){
         
         //排他
         for(var i = 0;i < olist.length;i++){
             olist[i].className = "";
            startMove(ulist[i],"opacity",0);
         }
         
         //控制index对应的数字高亮
         olist[index].className = "current";
         //控制index对应的图片显示
        
         startMove(ulist[index],"opacity",100);
        index++;
        //处理下标越界
        if(index == olist.length){
            index = 0;
        }
     }
         for(let i = 0 ;i < olist.length;i++){
             
             olist[i].onmouseover = function(){
                 clearInterval(moveTimer);
                 //记录当前操作的文字下标
                 index = i;
                 autoPlay();
             }
             olist[i].onmouseout = function(){
             moveTimer = setInterval(autoPlay,2000);
             }
         }
         
         
</script>
其中，../../sport2.js在jsday16中下方有；
js轮播图淡入淡出

猜你喜欢
