javascript版購物網站圖片輪轉帶左右按鈕切換（兼容IE和FF）

時間 2021-01-30

標籤 javascript css html java ide spa xml htm seo 欄目 JavaScript 简体版

原文原文鏈接

今天發現上次那個不能兼容IE 而後修改了下javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">css

<html xmlns="http://www.w3.org/1999/xhtml">html

<head>java

<title>圖片的輪換</title>ui

/*xml

2013-08-21htm

chenhuiseo

圖片輪換

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>

#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>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</div>

</div>

</body>

</html>

須要注意的是，在IE中當<a>和<img>嵌套使用時，如

<a>

</a>

在IE中或給</img>加上一個2px的邊框，和<a>標籤的鏈接同樣點擊後會變色，可是當<img>標籤單獨使用則不會有2px的邊框顯示，因此要在css中定義<img>標籤的邊框爲none，如img{border:0px none;}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

javascript版購物網站圖片輪轉帶左右按鈕切換 （兼容IE和FF）

javascript版購物網站圖片輪轉帶左右按鈕切換（兼容IE和FF）