内容来自《HTML+CSS+JavaScript网页制作案例教程(第2版)》
内容分类:html、css、js实战
书籍作者:黑马程序员
文章目录
- 效果图
- 代码
- html
- css
- js
- 文件下载
零、效果图
一、代码
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="设计、艺术、摄影、动画" />
<meta name="description" content="国内最大的艺术设计摄影交流平台">
<title>好趣首页</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="javascript/index.js"></script>
</head>
<body>
<!--top begin-->
<div class="top">
<div class="logo"><img src="images/logo.jpg" /></div>
<div class="pic01"><img src="images/pic01.gif" /></div>
<div class="options">
<div id="test" class="home">
<span></span>
<a href="#">我的关注</a>
<em></em>
<div id="list">
<a href="#">收藏的牛人</a>
<a href="#">收藏的作品</a>
</div>
</div>
<div id="lx" class="fav">
<span></span>
<a href="#">联系客服</a>
</div>
</div>
</div>
<!--top end-->
<!--nav begin-->
<div class="nav">
<div class="nav_con">
<ul>
<li>
<a href="#" class="no1 choose">首页</a>
<a href="#" class="no2">首页</a>
</li>
<li>
<a class="no1">艺术摄影</a>
<a class="no2">艺术摄影</a>
</li>
<li>
<a class="no1">短片拍摄</a>
<a class="no2">短片拍摄</a>
</li>
<li>
<a class="no1">炫酷P图</a>
<a class="no2">炫酷P图</a>
</li>
<li>
<a class="no1">嗨表情包</a>
<a class="no2">嗨表情包</a>
</li>
<li>
<a class="no1">搞笑动画</a>
<a class="no2">搞笑动画</a>
</li>
</ul>
</div>
</div>
<!--nav end-->
<!--banner begin-->
<div class="banner">
<div class="banner_pic" id="banner_pic">
<div class="current"><img src="images/01.jpg" alt="" /></div>
<div class="pic"><img src="images/02.jpg" alt="" /></div>
<div class="pic"><img src="images/03.jpg" alt="" /></div>
<div class="pic"><img src="images/04.jpg" alt="" /></div>
</div>
<ol id="button">
<li class="current"></li>
<li class="but"></li>
<li class="but"></li>
<li class="but"></li>
</ol>
</div>
<!--banner end-->
<!--stages begin-->
<div class="stages">
<div class="stages_title">通知公告</div>
<div class="stages_con">
<marquee>
<ul>
<li><a href="#">【活动资讯】2020年创作大赛北京赛区报名开始</a></li>
<li><a href="#">【奖品公告】2019年获奖名单点击查看!!!</a></li>
</ul>
</marquee>
</div>
</div>
<!--stages end-->
<!--content begin-->
<div class="content">
<div class="line1">
<!--left begin-->
<div class="left">
<div class="module">
<div class="title">
<div class="title_left"></div>
<div class="title_right">
<span></span>优秀短片展示
<a href="#" class="tittle_mark">more»</a>
</div>
<div class="title_bottom"></div>
</div>
<video src="video/pian.mp4" controls autoplay muted></video>
</div>
<div class="job">
<div class="job_title">
<span></span>招聘信息
<a href="#" class="tittle_mark">more»</a>
</div>
<div class="job_con">
<ul>
<li><span></span><a href="#">北京石和信息科技招聘UI设计</a></li>
<li><span></span><a href="#">上海微网络科技招聘前端工程师</a></li>
<li><span></span><a href="#">永特互动网络公司招聘前端工程师</a></li>
<li><span></span><a href="#">北京兰彩虹科技招聘UI设计实习生</a></li>
<li><span></span><a href="#">上海易网络科技招聘JS前端工程师</a></li>
</ul>
</div>
</div>
</div>
<!--left end-->
<!--center begin-->
<div class="center">
<div class="message">
<div class="message_title">
<ol id="m_essage">
<li class="current"><a href="#" >原创专区</a></li>
<li><a href="#">作品展示</a></li>
</ol>
<a href="#" class="tittle_mark tittle_mark1">more»</a>
</div>
<div id="message_con">
<dl class="current">
<dt class="message_left"></dt>
<dd class="message_right">
<ul class="left_ul">
<li><span></span><a href="#">口袋里的魔法石原创艺术角色设计-爱吃狼的小羊</a></li>
<li><span></span><a href="#">口袋里的魔法石原创艺术角色设计-爱吃狼的小羊</a></li>
<li><span></span><a href="#">口袋里的魔法石原创艺术角色设计-爱吃狼的小羊</a></li>
<li><span></span><a href="#">口袋里的魔法石原创艺术角色设计-爱吃狼的小羊</a></li>
<li><span></span><a href="#">口袋里的魔法石原创艺术角色设计-爱吃狼的小羊</a></li>
</ul>
<ul class="right_ul">
<li><a href="#">2020/06</a></li>
<li><a href="#">2020/06</a></li>
<li><a href="#">2020/06</a></li>
<li><a href="#">2020/06</a></li>
<li><a href="#">2020/07</a></li>
</ul>
</dd>
</dl>
<dl>
<dt class="message_left1"></dt>
<dd class="message_right">
<ul class="left_ul">
<li><span></span><a href="#">湖国山色艺术海报,领略自然风光-吃瓜群众</a></li>
<li><span></span><a href="#">湖国山色艺术海报,领略自然风光-吃瓜群众</a></li>
<li><span></span><a href="#">湖国山色艺术海报,领略自然风光-吃瓜群众</a></li>
<li><span></span><a href="#">湖国山色艺术海报,领略自然风光-吃瓜群众</a></li>
<li><span></span><a href="#">湖国山色艺术海报,领略自然风光-吃瓜群众</a></li>
</ul>
<ul class="right_ul">
<li><a href="#">2020/07</a></li>
<li><a href="#">2020/07</a></li>
<li><a href="#">2020/06</a></li>
<li><a href="#">2020/07</a></li>
<li><a href="#">2020/06</a></li>
</ul>
</dd>
</dl>
</div>
</div>
<div class="teacher">
<div class="teacher_title">
<span></span>作品欣赏
<a href="#" class="tittle_mark">more»</a>
</div>
<div class="teacher_con">
<ul>
<li>
<div><a href="#"><img src="images/teacher01.gif" /></a></div>
<div class="name"><a href="#">维托里亚的塞恩</a></div>
</li>
<li>
<div><a href="#"><img src="images/teacher02.gif" /></a></div>
<div class="name"><a href="#">维托里亚的塞恩</a></div>
</li>
<li>
<div><a href="#"><img src="images/teacher03.gif" /></a></div>
<div class="name"><a href="#">维托里亚的塞恩</a></div>
</li>
<li>
<div><a href="#"><img src="images/teacher04.gif" /></a></div>
<div class="name"><a href="#">维托里亚的塞恩</a></div>
</li>
</ul>
</div>
</div>
</div>
<!--center end-->
<!--right begin-->
<div class="right">
<div class="course">
<h3>工具选择<span>Tool selection</span></h3>
<ul>
<li><span></span><a href="#">Photoshop CC2019</a></li>
<li class="course_2"><span></span><a href="#">数据分析专家</a></li>
<li class="course_3"><span></span><a href="#">多屏通话1.0VS</a></li>
<li class="course_4"><span></span><a href="#">VZB插件小助手</a></li>
<li class="course_5"><span></span><a href="#">红绿录屏软件</a></li>
</ul>
</div>
<div class="study">
<a href="#"><img src="images/study.gif" /></a>
</div>
</div>
<!--right end-->
</div>
<div class="line2">
<!-- data begin -->
<div class="data">
<div class="data_title"><span></span>数据统计</div>
<div class="data_con">
<div class="con_border">
<a href="#"><img src="images/pic02.gif" /></a>
<a href="#"><img src="images/pic03.gif" /></a>
<a href="#"><img src="images/pic022.gif" /></a>
<a href="#"><img src="images/pic033.gif" /></a>
</div>
</div>
</div>
<!-- data end -->
<!-- book begin -->
<div class="book">
<div class="book_title"><span></span>创作达人</div>
<div class="book_con">
<ul>
<li>
<div><a href="#"><img src="images/book01.gif" /></a></div>
<div class="name"><a href="#">小米:吃肉的兔子</a></div>
</li>
<li>
<div><a href="#"><img src="images/book02.gif" /></a></div>
<div class="name"><a href="#">小米:吃肉的兔子</a></div>
</li>
<li>
<div><a href="#"><img src="images/book03.gif" /></a></div>
<div class="name"><a href="#">小米:吃肉的兔子</a></div>
</li>
<li>
<div><a href="#"><img src="images/book04.gif" /></a></div>
<div class="name"><a href="#">小米:吃肉的兔子</a></div>
</li>
<li>
<div><a href="#"><img src="images/book05.gif" /></a></div>
<div class="name"><a href="#">小米:吃肉的兔子</a></div>
</li>
</ul>
</div>
</div>
<!-- book end -->
</div>
</div>
<!--content end-->
<!--footer begin-->
<div class="footer">
<div class="btn">
<div><a href="#"><img src="images/top_btn.gif" /></a></div>
<div><a href="#">Top</a></div>
</div>
<div class="footer_con">
<p>版权所有 2006 - 2013 好趣科技有限公司</p>
<p>地址:北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096</p>
<p>电话:010-8222222222/60/70 传真:010-829322222邮箱: haiqu@it.com</p>
</div>
</div>
<!--footer begin-->
</body>
</html>
CSS:
/* CSS Document */
/*重置浏览器的默认样式*/
body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, img {margin:0; padding:0; border:0; list-style:none;}
/*全局控制*/
body{font-family:Arial, Helvetica, sans-serif,"宋体"; font-size:12px;}
/*未点击和点击后的样式*/
a:link,a:visited{color:#222;text-decoration:none;}
/*鼠标移上时的样式*/
a:hover{color:#ee3350;}
/*top*/
.top{
margin:5px auto 0px auto;
padding:0px;
width:1000px;
height:83px;
text-align:left;
}
.logo{
width:307px;
height:61px;
float:left;
margin-top:10px;
}
.pic01{
width:289px;
height:68px;
float:left;
margin:4px 0px 0px 20px;
}
.options{
float:right;
margin:48px 0px 0px 0px;
}
.home{
float:left;
width:95px;
height:33px;
margin:0 10px;
border:1px solid #fff;
position:relative;
}
.fav{
float:left;
width:80px;
height:33px;
border:1px solid #fff;
margin:0 10px;
}
.home span{
background:url(../images/icon_bg.gif) no-repeat 0 -30px;
float:left;
width:17px;
height:17px;
margin:9px 6px 0;
}
.home .span2{background:url(../images/icon_bg.gif) no-repeat -60px -60px;}
.home em{
background:url(../images/icon_bg.gif) no-repeat -60px -120px;
float:left;
width:6px;
height:5px;
margin:15px 6px 0 6px;
display:inline;
}
.home #list{
width:95px;
height:50px;
border:1px solid #E5E5E5;
position:absolute;
left:-1px;
top:33px;
background:#fff;
display:none;
z-index:9999;
}
.home #list a{
text-align:center;
height:25px;
width:95px;
line-height:25px;
margin:0;
display:inline-block;
}
.home #list a:hover{background:#E5E5E5;}
.fav span{
background:url(../images/icon_bg.gif) no-repeat -60px -90px;
float:left;
width:17px;
height:17px;
margin:11px 6px 0;
display:inline;
}
.fav .span3{background:url(../images/icon_bg.gif) no-repeat -60px -150px;}
.home a,.fav a{
color:#9b9b9b;
float:left;
margin-top:9px;
}
/*top*/
/*nav*/
.nav{
margin:9px 0px 0px 0px;
padding:0px;
width:100%;
height:40px;
line-height:40px;
background:url(../images/nav_bg.gif);
vertical-align:middle;
text-align:left;
}
.nav_con{
margin:0px auto;
padding:0px;
width:1000px;
}
.nav ul{color:#fff;}
.nav ul li{
width:150px;
height:40px;
transition:all 0.4s ease 0s;
float:left;
position:relative;
transform-style:preserve-3d;
perspective:6000px;
}
.nav ul li:hover{transform:rotateX(-90deg);}
.nav ul a:link,.nav ul a:visited{color:#fff;}
.nav ul a:hover{color:#fff;}
.nav ul li a{
width:150px;
height:40px;
line-height:40px;
text-align:center;
position:absolute;
top:0;
left:0;
font-size:14px;
}
.nav ul li .no1{background:url(../images/nav_bg.gif); transform:translateZ(20px);}
.nav ul li .choose{background:url(../images/nav_bg1.gif);}
.nav ul li .no2{background:url(../images/nav_bg1.gif); transform:rotateX(90deg) translateZ(20px);}
/*nav*/
/*banner*/
.banner{
width:1000px;
height:285px;
margin:13px auto 15px auto;
position:relative;
overflow:idden;
}
.banner .banner_pic .pic{display:none;}
.banner .banner_pic .current{display:block;}
.banner ol{
position:absolute;
left:460px;
bottom:26px;
}
.banner ol .but{
float:left;
width:10px;
height:10px;
margin-right:12px;
background:#fff;
opacity:0.5;
border-radius:50%;
}
.banner ol li{cursor:pointer;}
.banner ol .current{
color:#fff;
background:#ee3350;
float:left;
width:10px;
height:10px;
margin-right:12px;
text-align:center;
line-height:22px;
font-size:14px;
font-weight:bold;
border-radius:50%;
}
/*banner*/
/*stages*/
.stages{
margin:0px auto;
padding:0px;
border:1px solid #c4c4c4;
height:30px;
width:998px;
line-height:30px;
vertical-align:middle;
text-align:left;
overflow:hidden;
}
.stages_title{
width:96px;
text-align:center;
border-right:1px solid #c4c4c4;
float:left;
}
.stages_con{
width:900px;
float:left;
}
.stages_con ul li{float:left;}
.stages_con ul li a{
background:url(../images/icon6.gif) no-repeat left center;
padding:0px 0px 0px 8px;
margin:0px 40px 0px 0px;
width:3px;
height:5px;
line-height:30px;
vertical-align:middle;
color:#212121;
}
/*stages*/
/*left*/
.content{
margin:15px auto 0px auto;
padding-bottom:15px;
width:1000px;
}
.line1{
margin:0px;
padding:0px;
overflow:hidden;
}
.line1 .left{
margin:0px;
padding:0px;
width:233px;
float:left;
}
.line1 .left .module{
margin:0px;
padding:0px;
width:233px;
height:210px;
background:#000;
overflow:hidden;
}
.module .title{
margin:0px;
padding:0px;
width:233px;
height:35px;
}
.module .title_left{
margin:0px;
padding:0px;
float:left;
width:5px;
height:35px;
background:#ee3350;
}
.module .title_right{
margin:0px;
padding:0px;
float:left;
width:228px;
height:35px;
background:url(../images/nav_bg.gif);
text-align:left;
line-height:35px;
color:#FFF;
font-family:"黑体";
font-weight:bold;
font-size:12px;
overflow:hidden;
}
.module .title_bottom{
clear:both;
background:url(../images/icon8.gif) no-repeat 51px 0;
width:233px;
height:8px;
}
.module .title_right span{
background:url(../images/icon_bg.gif) no-repeat 0 -60px;
width:11px;
height:11px;
float:left;
margin:12px 7px 0px 13px;
}
.tittle_mark{
font-size:12px;
float:right;
padding-right:10px;
font-family:"微软雅黑";
font-weight:400;
}
.tittle_mark:link,.tittle_mark:visited{color:#a4a4a4;}
.tittle_mark:hover{color:#ee3350;}
video{
margin-top:40px;
width:233px;
}
.job{
margin:15px 0px;
padding:0px;
}
.job_title{
background:url(../images/title_bg.gif) repeat-x;
width:231px;
height:30px;
line-height:30px;
text-align:left;
border:1px solid #d6d6d6;
border-bottom:1px solid #808080;
color:#393939;
font-family:"宋体";
font-size:12px;
font-weight:bold;
}
.job_title span{
background:url(../images/icon_bg.gif) no-repeat 0 -150px;
float:left;
width:16px;
height:14px;
display:inline;
margin:8px 7px 0 11px;
}
.job_con{
margin:0px;
padding:16px 0px 16px 15px;
text-align:left;
}
.job_con ul{
margin:0px;
padding:0px;
list-style:none;
}
.job_con ul li{
margin:10px 0px;
padding:0px;
}
.job_con ul li span{
background:url(../images/icon_bg.gif) no-repeat -60px -30px;
width:10px;
height:13px;
float:left;
display:inline;
margin-right:13px;
}
/*left*/
/*center*/
.line1 .center{
margin:0px 0px 0px 12px;
padding:0px;
float:left;
text-align:left;
width:510px;
overflow:hidden;
}
.message_title{
margin:0px;
padding:0px 0px 0px 5px;
width:505px;
height:35px;
overflow:hidden;
background:url(../images/nav_bg.gif);
}
.message_title ol li{float:left;}
.message_title ol a{
color:#fff;
font-weight:bold;
line-height:35px;
padding:0px 20px;
}
.message_title ol .current a{
background:url(../images/nav_bg1.gif);
float:left;
padding:0px 20px;
}
.tittle_mark1{margin:8px 12px 0 0;}
#message_con{
margin:0px;
padding:30px 0px 0px 17px;
overflow:hidden;
height: 160px;
}
#message_con dl{display: none;}
#message_con dl.current{display:block;}
.message_left{
background:url(../images/pic1.jpg) no-repeat left top;
width:115px;
height:125px;
text-align:center;
padding:4px 0px;
float:left;
}
.message_left1{
background:url(../images/pic2.jpg) no-repeat left top;
width:115px;
height:125px;
text-align:center;
float:left;
}
.message_right{
float:left;
margin:0px 0px 0px 14px;
padding:0px 13px 0px 0px;
width:350px;
}
.message_right ul.left_ul{float:left;}
.message_right ul.left_ul li,.message_right ul.right_ul li{line-height:26px;}
.message_right ul.left_ul li span{
background:url(../images/icon_bg.gif) no-repeat 0 -120px;
width:3px;
height:3px;
float:left;
margin:10px 7px 0 0;
}
.message_right ul.right_ul li a{color:#aaaaaa;}
.message_right ul.right_ul{
margin:0px;
padding:0px;
list-style:none;
float:right;
}
.teacher{
padding:0px;
width:510px;
clear:both;
}
.teacher_title{
background:url(../images/title_bg.gif) repeat-x;
width:508px;
height:24px;
border:1px solid #d6d6d6;
border-bottom: 1px solid #808080;
color:#393939;
font-family:"宋体";
font-size:12px;
font-weight:bold;
padding:6px 0px 0px 0px;
position:relative;
overflow:hidden;
}
.teacher_title span{
background:url(../images/icon_bg.gif) no-repeat 0 -180px;
width:17px;
height:15px;
float:left;
margin:0px 10px 0 9px;
}
.teacher_title img{
float:right;
display:inline;
}
.teacher_title a{
margin:0px 0px 0px 0px;
float:right;
position:relative;
right:10px;
top:0;
}
.teacher_con{
width:510px;
margin:0px;
padding:18px 0px 15px 17px;
overflow:hidden;
}
.teacher_con ul li{
margin:3px 13px 0px 13px;
padding:0px;
float:left;
text-align:center;
}
.teacher_con ul li .name{margin:10px 0px 0px 0px;}
.teacher_con ul li .name a{color:#535353;}
/*center*/
/*right*/
.line1 .right{
margin:0px;
padding:0px;
width:233px;
float:right;
}
.course{
width:220px;
height:303px;
background-image:url(../images/course_bg.png);
padding:27px 0 0 13px;
margin:0px;
text-align:left;
}
.course h3{
font-size:12px;
color:#393939;
height:40px;
}
.course h3 span{
font-weight:normal;
padding-left:6px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
.course ul li{
width:203px;
height:40px;
border:1px solid #e8e8e8;
margin-bottom:10px;
background:#FFF;
}
.course ul li span{
background:url(../images/icon_bg.gif) no-repeat 0 -210px;
width:30px;
height:30px;
float:right;
margin:7px 8px 0 0;
}
.course .course_2 span{background-position:0 -240px;}
.course .course_3 span{background-position:0 -270px;}
.course .course_4 span{background-position:-30px 0px;}
.course .course_5 span{background-position:-30px -30px;}
.course ul li a{
display:block;
height:19px;
border-left:4px solid #0080db;
margin-top:10px;
line-height:19px;
padding-left:15px;
margin-left:-1px;
}
.course .course_2 a{border-left:4px solid #61a301;}
.course .course_3 a{border-left:4px solid #f50149;}
.course .course_4 a{border-left:4px solid #995f91;}
.course .course_5 a{border-left:4px solid #ffb409;}
.study{ margin-top:15px;}
/*right*/
/*line2*/
.line2{
margin:0px;
padding:0px;
clear:both;
text-align:left;
overflow:hidden;
}
.data{
margin:0px;
padding:0px;
width:233px;
float:left;
}
.data_title{
margin:0px;
padding:0px;
width:231px;
height:30px;
line-height:30px;
background:url(../images/title_bg.gif) repeat-x;
border:1px solid #d6d6d6;
border-bottom: 1px solid #808080;
color:#393939;
font-weight:bold;
}
.data_title span{
background:url(../images/icon_bg.gif) no-repeat -30px -60px;
width:22px;
height:18px;
float:left;
margin:8px 5px 0 10px;
}
.data_con{
margin:0px;
padding:0px;
background:#f7f7f7;
}
.con_border{
border:1px solid #ebebeb;
border-top:none;
margin:0px;
height:210px;
padding:33px 8px 23px 8px;
}
.data_con a{
display: block;
width: 87px;
height: 87px;
float: left;
margin:0 10px 18px;}
.book{
float:left;
margin:0px 0px 0px 12px;
padding:0px;
width:755px;
display:inline;
overflow:hidden;
}
.book_title{
margin:0px;
padding:0px;
width:753px;
height:30px;
line-height:30px;
font-weight:bold;
color:#393939;
background:url(../images/title_bg.gif) repeat-x;
border:1px solid #d6d6d6;
border-bottom: 1px solid #808080;
vertical-align:middle;
overflow:hidden;
}
.book_title span{
background:url(../images/icon_bg.gif) no-repeat -30px -90px;
width:16px;
height:12px;
float:left;
margin:8px 7px 0px 13px;
}
.book_con{
border:1px solid #ebebeb;
border-top:none;
margin:0px;
height:265px;
background:#f7f7f7;
width:755px;
overflow:hidden;
}
.book_con ul{
margin:20px 0 0 24px;
overflow:hidden;
}
.book_con ul li{
float:left;
text-align:center;
margin:0px 14px 13px 0;
}
.book_con ul li p{margin-top:5px;}
.book_con ul li .name{ margin:15px 0px 0px 0px;}
/*line2/
/*footer*/
.footer{
width:100%;
background:url(../images/nav_bg.gif);
clear:both;
padding-bottom:25px;
}
.footer .btn{
margin:0px auto;
width:906px;
text-align:left;
padding-left:94px;
}
.footer .btn a{
color:#fff;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
letter-spacing:1px;
}
.footer_con p{
line-height:22px;
text-align:center;
color:#fff;
font-family:"微软雅黑";
}
/*footer*/
JS:
// JavaScript Document
window.onload=function(){
//实现下拉菜单
var test=document.getElementById("test");
var list=document.getElementById("list");
var span=test.getElementsByTagName("span")[0];
var a=test.getElementsByTagName("a")[0];
//鼠标移入时
test.onmouseover=function(){
this.style.border="1px solid #E5E5E5";
a.style.color="#ee3350";
span.className="span2";
list.style.display="block";
}
//鼠标移出时
test.onmouseout=function(){
this.style.border="";
a.style.color="";
span.className="";
list.style.display="";
}
//改变“联系客服”的CSS样式
var lx=document.getElementById("lx");
var span1=lx.getElementsByTagName("span")[0];
var a1=lx.getElementsByTagName("a")[0];
lx.onmouseover=function(){
a1.style.color="#ee3350";
span1.className="span3";
}
lx.onmouseout=function(){
a1.style.color="";
span1.className="";
}
//实现轮播效果
//保存当前焦点元素的索引
var current_index=0;
//5000表示调用周期,以毫秒为单位,5000毫秒就是5秒
var timer=window.setInterval(autoChange, 5000);
//获取所有轮播按钮
var button_li=document.getElementById("button").getElementsByTagName("li");
//获取所有banner图
var pic_div=document.getElementById("banner_pic").getElementsByTagName("div");
//遍历元素
for(var i=0;i<button_li.length;i++){
//添加鼠标滑过事件
button_li[i].onmouseover=function(){
//定时器存在时清除定时器
if(timer){
clearInterval(timer);
}
//遍历元素
for(var j=0;j<pic_div.length;j++){
//将当前索引对应的元素设为显示
if(button_li[j]==this){
current_index=j; //从当前索引位置开始
button_li[j].className="current";
pic_div[j].className="current";
}else{
//将所有元素改变样式
pic_div[j].className="pic";
button_li[j].className="but";
}
}
}
//鼠标移出事件
button_li[i].onmouseout=function(){
//启动定时器,恢复自动切换
timer=setInterval(autoChange,5000);
}
}
function autoChange(){
//自增索引
++current_index;
//当索引自增达到上限时,索引归0
if (current_index==button_li.length) {
current_index=0;
}
for(var i=0;i<button_li.length;i++){
if(i==current_index){
button_li[i].className="current";
pic_div[i].className="current";
}else{
button_li[i].className="but";
pic_div[i].className="pic";
}
}
}
//实现tab栏切换
//获取所有tab栏按钮
var m_essage_li=document.getElementById("m_essage").getElementsByTagName("li");
//获取所有tab栏内容
var message_con_dl=document.getElementById("message_con").getElementsByTagName("dl");
//遍历元素
for(var c=0;c<m_essage_li.length;c++){
//添加鼠标滑过事件
m_essage_li[c].onmouseover=function(){
//遍历元素
for(var b=0;b<message_con_dl.length;b++){
//将当前索引对应的元素设为显示
if(m_essage_li[b]==this){
m_essage_li[b].className="current";
message_con_dl[b].className="current";
}else{
//将所有元素改变样式
m_essage_li[b].className="";
message_con_dl[b].className="";
}
}
}
}
}