您的位置：首页 > 运维架构 > 网站架构

javascript版购物网站图片轮转带左右按钮切换（兼容IE和FF）

2012-10-18 13:04 507 查看

今天发现上次那个不能兼容IE 然后修改了下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>图片的轮换</title>
<script type="text/javascript">

/*
2013-08-21
chenhui
图片轮换
*/
var now = 1;
var max = 6;
var t ;
function changeAdvertisement() {
//显示当前的图片
document.getElementById("ad" + now).style.display = "block";
document.getElementsByName("num")[now-1].style.background = "#fe7400";

//隐藏非当前的图片
for(var index = 1; index <= 6; index++) {
if(index != now) {
document.getElementById("ad" + index).style.display = "none";
document.getElementsByName("num")[index-1].style.background = "pink";
}
}

if(now == max) {
now = 1;
} else {
now++;
}

//setTimeout("changeAdvertisement()",2000);
t = setTimeout("changeAdvertisement()",5000);
}

function showNow(params) {
now = params;

clearTimeout(t);//重新开始
changeAdvertisement();
}
function focus_prev(){
var n = (now+3)%6;
n = n+1;
showNow(n);
}
function focus_next(){
var n = (now+5)%6;
n = n+1;
showNow(n);
}
</script>
<style type="text/css">
#adver {
position:relative;
/*border:1px solid red;*/
width:700px;
height:290px;
}
#adver .num{
height:30px;
width:240px;
/*border:1px solid blue;*/
position:absolute;
right:10px;
bottom:10px;
}
#adver .num .ad{
pink;< /p>color:blue;
opacity:0.7;
font-size:20px;
height:30px;
width:30px;
line-height:30px;
text-align:center;
display:block;
text-decoration:none;
border-radius:15px 15px 15px 15px;
float:left;
margin-left:10px;
}
#adver .num .ad:hover{
background:#ff7400;
opacity:0.8;
}
#left,#right{
width:50px;
height:250px;
line-height:250px;
background-color:#000;
opacity:0.3;
Alpha:(opacity=50);
display:block;
color:#fff;
}
#left{
position:absolute;
left:0px;
top:0px;
}
#right{
position:absolute;
right:0px;
top:0px;
}
</style>
</head>
<body onload="changeAdvertisement()">
<div id="adver">
<div id="ad1">
<a href="#">
<img src=\'#\'" /1.jpg" alt="" />
</a>
</div>
<div id="ad2" style="display:none;">
<a href="#">
<img src=\'#\'" /2.jpg" alt="" />
</a>
</div>
<div id="ad3" style="display:none;">
<a href="#">
<img src=\'#\'" /3.jpg" alt="" />
</a>
</div>
<div id="ad4" style="display:none;">
<a href="#">
<img src=\'#\'" /4.jpg" alt="" />
</a>
</div>
<div id="ad5" style="display:none;">
<a href="#">
<img src=\'#\'" /5.jpg" alt="" />
</a>
</div>
<div id="ad6" style="display:none;">
<a href="#">
<img src=\'#\'" /6.jpg" alt="" />
</a>
</div>
<div class="num">
<a class="ad" name="num" href="#" onmouseover="showNow(1)">1</a>
<a class="ad" name="num" href="#" onmouseover="showNow(2)">2</a>
<a class="ad" name="num" href="#" onmouseover="showNow(3)">3</a>
<a class="ad" name="num" href="#" onmouseover="showNow(4)">4</a>
<a class="ad" name="num" href="#" onmouseover="showNow(5)">5</a>
<a class="ad" name="num" href="#" onmouseover="showNow(6)">6</a>
</div>
<div class="btn">
<a class="btn-left" id="left" href="void(0)">上一张< /a>
<a class="btn-right" id="right" href="void(0)">下一张< /a>
</div>
</div>
</body>
</html>
需要注意的是，在IE中当<a>和<img>嵌套使用时，如
<a>
<img src=\'#\'" alt="" />
</a>
在IE中或给</img>加上一个2px的边框，和<a>标签的连接一样点击后会变色，但是当<img>标签单独使用则不会有2px的边框显示，所以要在css中定义<img>标签的边框为none，如img{border:0px none;}
本文出自 “陈辉” 博客，请务必保留此出处http://chenhuixfyy.blog.51cto.com/6136934/1030511

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

javascript版购物网站图片轮转带左右按钮切换 （兼容IE和FF）

javascript版购物网站图片轮转带左右按钮切换（兼容IE和FF）