爱奇艺轮播图简单实现

绝地灬酷狼 2022-05-09 11:33 297阅读 0赞

html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>爱奇艺导航</title>
        <link rel="stylesheet" type="text/css" href="imgchange.css">
    </head>
    <body>
    <div id="box">
        <div id="imgBackground">
            <ul>
                <li><a href="#"><img src="s1.jpg" alt="1.jpg"></a> </li>
                <li><a href="#"><img src="s4.jpg" alt="2.jpg"></a> </li>
                <li><a href="#"><img src="s1.jpg" alt="3.jpg"></a> </li>
                <li><a href="#"><img src="s4.jpg" alt="4.jpg"></a> </li>
                <li><a href="#"><img src="s1.jpg" alt="5.jpg"></a> </li>
            </ul>
        </div>
        <div id="description">
            <ul>
                <li><a href="#">One</a> </li>
                <li><a href="#">Two</a> </li>
                <li><a href="#">Three</a> </li>
                <li><a href="#">Four</a> </li>
                <li><a href="#">Five</a> </li>
            </ul>
        </div>
    </div>
    <script src="imgchange.js"></script>
    </body>
    </html>

css

*{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
        font-size: 0;
    }
    #box{
        position: relative;
        height: 400px;
        overflow: hidden;
    }
    #description{
        position: absolute;
        width: 300px;
    
        height: 400px;
        left: 1100px;
        top: 0px;
        background-color: rgba(0,0,0,0.7);
    }
    img{
        width: 1300px;
        height: 400px;
    
    }
    #imgBackground{
        width: 1300px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }
    #description a{
        text-decoration: none;
        color: white;
        font-size: 15px;
        display: block;
        line-height: 80px;
    }
    #description li{
        text-align: center;
        height: 80px;
    }

javascript

addLoadEvent(aHover);
    addLoadEvent(move(0));
    var timec=null;
    function addLoadEvent(func) {
        var oldonload=window.onload;
        if(typeof window.onload!="function")
        {
            window.onload=func;
        }
        else{
            window.onload=function () {
                oldonload();
                func();
            }
        }
    }
    function aHover() {
        var description=document.getElementById("description");
        var alist=description.getElementsByTagName("a");
        alist[0].style.color="green";
            alist[0].onmouseover=function (ev) {
                move(0);
            };
        alist[1].onmouseover=function (ev) {
            move(1);
        };
        alist[2].onmouseover=function (ev) {
            move(2);
        };
        alist[3].onmouseover=function (ev) {
            move(3);
        };
        alist[4].onmouseover=function (ev) {
            move(4);
        };
    
    }
    function play() {
        autoMove(0);
    }
    function autoMove(s) {
        var elem=document.getElementById("imgBackground");
        var description=document.getElementById("description");
        var alist=description.getElementsByTagName("a");
        var s=elem.style.top;
        var i=s/400;
        alist[i].style.color="green";
        elem.style.top=(-i)*400+"px";
        var timec=setTimeout(function () {
            autoMove(i+1);
        },3000);
    }
    function move(i) {
        var elem=document.getElementById("imgBackground");
        var description=document.getElementById("description");
        var alist=description.getElementsByTagName("a");
        if(timec)
        {
            clearTimeout(timec);
        }
        for(var j=0;j<alist.length;j++)
        {
            if(i==j)
            {
                alist[i].style.color="green";
            }
           else
            {
                alist[j].style.color="white";
            }
        }
        elem.style.top=(-i)*400+"px";
         timec=setTimeout(function () {
            if((i)<4)
            {
                move(i+1);
            }
            else {
                move(0);
            }
        },3000);
    }

![在这里插入图片描述][70]

[70]: /images/20220509/3191b84e33964a609023d3c3bf9f67ec.png