admin管理员组文章数量:1659336
实现一个爱奇艺网站首页的轮播图:
<!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://m.elefans.com/dongtai/1729833750a1214264.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论