javascript--第九节-爱奇艺网站首页(轮播图)
2016-06-14 08:54
399 查看
实现一个爱奇艺网站首页的轮播图:
<!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>
相关文章推荐
- [置顶] HDFS入门笔记------架构以及应用介绍
- Scrapy的架构初探
- LVS-DR模型实现负载均衡
- 跨屏幕网站制作
- 微服务架构中的软件测试
- innodb关键特性和体系架构整理
- 查询专利的权威网站
- Scrapy:抓取返回数据格式为JSON的网站内容
- Hbase架构
- IIS7/IIS7.5/IIS8网站目录执行权限设置方法(与IIS6不同)
- 【架构师之路 1】我就是我,颜色不一样的烟火
- SQL学习网站
- 如何搭建大型网站系统
- 财经网站
- 4——虚拟机体验之Xen篇——令人脑洞大开的奇异架构
- 3——虚拟机体验之VirtualBox篇——性能强大的经典架构
- 架构设计:负载均衡层设计方案(9)——负载均衡层总结下篇
- 架构设计:负载均衡层设计方案(8)——负载均衡层总结上篇
- 架构设计:负载均衡层设计方案(5)——LVS单节点安装
- 架构设计:负载均衡层设计方案(4)——LVS原理