美文网首页
渐变轮播图

渐变轮播图

作者: 丶Romantic | 来源:发表于2018-07-17 11:00 被阅读0次
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style type="text/css">
            *{
                margin:0;
                padding: 0;
            }
            #box{
                width: 800px;
                height: 500px;
                margin:0 auto;
                position:relative;
                border: 1px solid powderblue;
                
            }
            #img li{
                width: 800px;
                height: 500px;
                border: 1px solid red;
                list-style: none;
                line-height: 500px;
                text-align: center;
                position: absolute;
                top: 0;left: 0;
                /*display: none;*/
                transition: .5s;
            }
            #l{
                position: absolute;
                left: 0;top: 45%;
                z-index: 10;
            }
            #r{
                position: absolute;
                right: 0;top: 45%;
            }
            #dian{
                position: absolute;
                bottom:10px;right: 10px;
                z-index: 15;
            }
            #dian li{
                width: 10px;
                height: 10px;
                /*background: yellow;*/
                border: 1px solid springgreen;
                float: left;
                
                margin-right: 20px;
                
                border-radius: 50%;
                list-style: none;
    
            }
            /*#dian li:hover{
                background: orangered;
            }*/
        </style>
    </head>
    <body>
        <div id="box">
            <button id="l">←</button>
            <ul id="img">
                <li class="g"><img src="../images/作业2_10.png"/></li>
                <li class="g"><img src="../images/作业2_16.png"/></li>
                <li class="g"><img src="../images/作业2_18.png"/></li>
                <li class="g"><img src="../images/作业2_20.png"/></li>
            </ul>
            <button id="r">→</button>
            <ul id="dian">
                <li class="d"></li>
                <li class="d"></li>
                <li class="d"></li>
                <li class="d"></li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        var btn1 = document.getElementById("l")//获取元素
        var btn2 = document.getElementById("r")
        var li = document.getElementsByClassName("g")
        var d = document.getElementsByClassName("d")
        var box = document.getElementById("box")
        console.log(li)
        var index = 0;
        btn2.onclick=function(){  
            index++;
            if(index>li.length-1){
                index=0;
            }
            for(var i = 0;i<li.length;i++){
                li[i].style.opacity=0;
                d[i].style.background="white"
            }
            d[index].style.background="orangered"
            li[index].style.opacity=1;
        }
        btn1.onclick=function(){
            index--;
            if(index<0){
                index=li.length-1
            }
            for(var i = 0;i<li.length;i++){
                li[i].style.opacity=0;
                d[i].style.background="white"
            }
            li[index].style.opacity=1;
            d[index].style.background="orangered"
        }
        for(var i = 0;i<d.length;i++){
            d[i].count=i;
            d[i].onclick=function(){
                for(var i = 0;i<li.length;i++){
                    li[i].style.opacity="0"
                    d[i].style.background="white"
                }li[this.count].style.opacity=1
                this.style.background="orangered"
                index=this.count
            }
        }
    var timer = setInterval(btn2.onclick,1000)
    box.onmouseover=function(){
        clearTimeout(timer)
    }
    box.onmouseout=function(){
        timer=setInterval(btn2.onclick,1000)
    }
    </script>
    </html>
    

    ![SGGLLKOP7]7276H8KL5}QNL.png](https://img.haomeiwen.com/i9647044/8aefdeb60e947fd9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    相关文章

      网友评论

          本文标题:渐变轮播图

          本文链接:https://www.haomeiwen.com/subject/bdswpftx.html