javascript--第九节-爱奇艺网站首页（轮播图）

来源：互联网发布：中国远征军知乎编辑：程序博客网时间：2024/05/22 14:31
实现一个爱奇艺网站首页的轮播图：
<!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>
0 0