爱奇艺轮播图简单实现

最新推荐文章于 2021-08-01 16:02:22 发布

skr养成记

最新推荐文章于 2021-08-01 16:02:22 发布

阅读量1.6k

点赞数 3

分类专栏：备忘录文章标签： javascript 轮播图爱奇艺轮播

本文链接：https://blog.csdn.net/qq_41335337/article/details/82956489

版权

备忘录专栏收录该内容

5 篇文章

订阅专栏

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);
}

在这里插入图片描述