<!--
今天忽然想要用JS模仿一下FLASH的新闻图片展播效果，
思索前后发觉HTML标签的dispaly个属性可以结合JS的定时器使用
果然一做还是有点模样的，简简单单大家看看
图片的地址以及指向的地址大家可以根据需业务需求从数据库查询出来使用
作者：1（QQ279074838:欢迎大家交流学习）
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body{ margin-left:0px; margin-top: 0px;width:400px;height:300px;}
img{border:0px;}
.myBody
{
border:#000000 1px solid;
width:400px;
height:320px;
float:left;
}
.imgShow
{
border-bottom:#000000 1px solid;
width:400px;
height:300px;
float:left;
}
.navigation
{
width:400px;
height:20px;
float:left;
}
</style>
<script language="javascript">
//让图片按比例缩放
function setImg(ImgD,iwidth,iheight)
{
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt="点击查看产品";
}
ImgD.style.cursor= "pointer"; //改变鼠标指针
}
}
//点击切换到图片
function changeImg(obj,obj2)
{
document.getElementById(obj).style.display=""
document.getElementById(obj2).style.color="#ff0000"
for(var i=1;i<6;i++)
{
if(obj==("imgSpan"+i))
{
document.getElementById(obj).style.display=""
document.getElementById(obj2).style.color="#ff0000"
}
else
{
document.getElementById("imgSpan"+i).style.display="none"
document.getElementById("myA"+i).style.color="#000000"
}
}
}
//定时切换图片
var j=1;
function changeImgOnTime()
{
if(j==6)
{
j=1
}
document.getElementById("myA"+j).style.color="#ff0000"
document.getElementById("imgSpan"+j).style.display=""
for(var i=1;i<6;i++)
{
if(i==j)
{
document.getElementById("imgSpan"+i).style.display=""
document.getElementById("myA"+i).style.color="#ff0000"
}
else
{
document.getElementById("imgSpan"+i).style.display="none"
document.getElementById("myA"+i).style.color="#000000"
}
}
j++;
}
setInterval("changeImgOnTime()",3000);
</script>
</head>
<body >
<div class="myBody" >
<div class="imgShow">
<table width="400px" height="300px">
<tr><td>
<center>
<span id="imgSpan1" style="display:">
<a href="product_info.asp?p_id=1">
<img id="productImg"src="images/1.jpg" onload="setImg(this,400,300)"/>
</a>
</span>
<span id="imgSpan2" style="display:none">
<a href="product_info.asp?p_id=2">
<img id="productImg"src="images/2.jpg" onload="setImg(this,400,300)"/>
</a>
</span>
<span id="imgSpan3" style="display:none">
<a href="product_info.asp?p_id=3">
<img id="productImg"src="images/3.jpg" onload="setImg(this,400,300)"/>
</a>
</span>
<span id="imgSpan4" style="display:none">
<a href="product_info.asp?p_id=4">
<img id="productImg"src="images/4.jpg" onload="setImg(this,400,300)"/>
</a>
</span>
<span id="imgSpan5" style="display:none">
<a href="product_info.asp?p_id=5">
<img id="productImg"src="images/5.jpg" onload="setImg(this,400,300)"/>
</a>
</span>
</center>
</td></tr>
</table>
</div>
<div class="navigation">
<span id="myA1" style="cursor:hand;color:ff0000" onclick="changeImg(imgSpan1.id,this.id)">1</span>
<span id="myA2" style="cursor:hand" onclick="changeImg(imgSpan2.id,this.id)">2</span>
<span id="myA3" style="cursor:hand" onclick="changeImg(imgSpan3.id,this.id)">3</span>
<span id="myA4" style="cursor:hand" onclick="changeImg(imgSpan4.id,this.id)">4</span>
<span id="myA5" style="cursor:hand" onclick="changeImg(imgSpan5.id,this.id)">5</span>
</div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
前往页