admin管理员组

文章数量:1659334

实现一个爱奇艺网站首页的轮播图：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>爱奇艺导航</title>
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }
        #nav {
            list-style-type: none;
            float: right;
            padding: 0;
            margin: 0;
            z-index: 0;
            padding-top: 30px;

        }

        #nav li {
            width: 220px;
            height: 40px;
            line-height: 40px;;
            /*background-color: #569e04;*/
            background-color: #010101;
            border-bottom: 1px solid #999999;
            text-align: center;
            color: white;
            font-size: 14px;
            margin-right: 20px;
            cursor: pointer;
        }
        #nav .now{
            background-color: #569e04;
        }
        #pic {
            list-style-type: none;
            height: 410px;
            padding: 0;
            margin: 0;
            position: absolute;
            top: 0;
            z-index: -1;
            /*display: none;*/
            overflow: hidden;
        }

    </style>
</head>
<body>
<div class="nav">
    <ul id="nav">
        <li onmousemove="fun('0')" class="now">余罪</li>
        <li onmousemove="fun('1')">我们的法则</li>
        <li onmousemove="fun('2')">跑男</li>
        <li onmousemove="fun('3')">废柴兄弟</li>
        <li onmousemove="fun('4')">最好的我们</li>
        <li onmousemove="fun('5')">大张伟</li>
        <li onmousemove="fun('6')">WWDC大会</li>
        <li onmousemove="fun('7')">我的朋友</li>
    </ul>
    <div id="pic">
        <div><img src="tv/0.jpg"></div>
        <div><img src="tv/1.jpg"></div>
        <div><img src="tv/2.jpg"></div>
        <div><img src="tv/3.jpg"></div>
        <div><img src="tv/4.jpg"></div>
        <div><img src="tv/5.jpg"></div>
        <div><img src="tv/6.jpg"></div>
        <div><img src="tv/7.jpg"></div>
    </div>
</div>
<script>
    var nav = document.getElementById("nav").getElementsByTagName("li");
    var navshow = document.getElementById("pic").getElementsByTagName("div");
    function fun(num) {
        for (var n = 0; n < nav.length; n++) {
            nav[n].className="";
        }
        nav[num].className="now";

        for(var m=0;m<navshow.length;m++){
            navshow[m].style.display="none";
        }
        navshow[num].style.display="block";
    }

</script>
</body>
</html>

本文标签： 首页网站JavaScript爱奇艺轮播图

版权声明：本文标题：javascript--爱奇艺网站首页（轮播图） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1729833750a1214264.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。