<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<!--当前页面的三要素-->
<title>js滑动图片显示和隐藏效果</title>
<meta name="Keywords" content="js滑动,图片显示">
<meta name="description" content="描述">
<!--css 内部样式 , js-->
<style type="text/css">
*{margin:0px; padding:0px;}
/*属性:值; width:300px; 像素 */
#News{width:300px; height:305px;border:1px solid #ddd;
margin:50px auto;}
/*list-style-type:none; 去掉前面的圆点*/
#News ul li{list-style-type:none;padding:0px 10px 0px 10px;}
#News ul li a{color:#2d2d2d; font-family:"微软雅黑";font-size:14px; text-decoration:none;/*去掉下划线*/}
#News ul li a:hover{color:#eb1c24;text-decoration:underline;}
#News ul li span a{color:#726168;}
#News ul li span a:hover{color:#eb1c24;}
#News ul li p{line-height:30px;}
#News ul li img{display:none;/*隐藏图片*/}
#News ul li img.xs{display:block;/*显示第一图片*/}
#News ul li.bg{background:url("images/bg.png"); padding-bottom:15px;}
#News ul li span.hover a{color:#eb1c24;}
</style>
</head>
<body>
<!--div盒子模型，宽度，高度 放内容-->
<div id="News">
<ul>
<li class="bg">
<p><span class="hover"><a href="#">[时装频道]</a></span>
<a href="#">2014秋冬巴黎时装周</a></p>
<img src="images/1.jpg" class="xs"/>
</li>
<li><p><span><a href="#">[男装频道]</a></span>
<a href="#">穿出Street Fashion</a></p>
<img src="images/2.jpg"/>
</li>
<li><p><span><a href="#">[时装频道]</a></span>
<a href="#">2014秋冬巴黎时装周</a></p>
<img src="images/3.jpg"/>
</li>
<li>
<p>
<span><a href="#">[时装频道]</a></span>
<a href="#">2014秋冬米兰时装周</a>
</p>
<img src="images/4.jpg"/>
</li>
</ul>
</div>
<!-- <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> -->
<script type="text/javascript">
window.onload=function(){
var oNews = document.getElementById(‘News‘);
var oLi = oNews.getElementsByTagName(‘li‘);
var oimg = document.getElementsByTagName(‘img‘);
var ospan = document.getElementsByTagName(‘span‘);
for(var i=0;i<oLi.length;i++){
oLi[i].index=i;
oLi[i].onmouseover=function(){
for(var i=0;i<oLi.length;i++){
oLi[i].className=‘‘;
oimg[i].style.display=‘none‘;
ospan[i].className=‘‘;
}
this.className=‘bg‘;
if(this.className=‘bg‘){
ospan[this.index].className=‘hover‘;
oimg[this.index].style.display=‘block‘;
}
}
}
}
</script>
</body>
</html>
时间： 2024-08-05 15:36:13