javascript如何在轮播图图片加入超链接
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{border: white 1px solid; padding: 2px 10px; margin-left: 5px;cursor: pointer; color:white;}
#spanbtn{
position: absolute; top: 254px; left: 356px;
}
img{
width:507px; height:287px;
}
</style>
<script type="text/javascript">
var arr = new Array;
arr[0] = "images/1.jpg"
arr[1] = "images/2.jpg"
arr[2] = "images/3.jpg"
arr[3] = "images/4.jpg"
var count=0;
function autoPlayer(){
if(arr.length==count){count=0;}
document.getElementById("banner1").src=arr[count];
count++;
}
var Timer = setInterval(autoPlayer,2000);
function clearTimer(){
clearInterval(Timer);
}
//鼠标悬停指定播放图片
function showbannerbyid(num){
clearTimer();
var index = parseInt(num);
document.getElementById("banner1").src=arr[index-1];
count=index;
}
//鼠标离开恢复自动播放
function btnMouseOut(){
Timer = setInterval(autoPlayer,2000);
}
</script>
</head>
<body onLoad="chImg()">
<div id="gundong" style="margin-top: 10px; margin-left: 20px; position: relative; float: left;">
<div>
<img src="images/1.jpg" id="banner1" /></a>
</div>
<div id="spanbtn">
<span onmouseover="showbannerbyid(1)" onmouseout="btnMouseOut()">1</span><span onmouseover="showbannerbyid(2)" onmouseout="btnMouseOut()">2</span><span onmouseover="showbannerbyid(3)" onmouseout="btnMouseOut()">3</span><span onmouseover="showbannerbyid(4)" onmouseout="btnMouseOut()">4</span>
</div>
</div>
</body>
</html> 展开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{border: white 1px solid; padding: 2px 10px; margin-left: 5px;cursor: pointer; color:white;}
#spanbtn{
position: absolute; top: 254px; left: 356px;
}
img{
width:507px; height:287px;
}
</style>
<script type="text/javascript">
var arr = new Array;
arr[0] = "images/1.jpg";
arr[1] = "images/2.jpg";
arr[2] = "images/3.jpg";
arr[3] = "images/4.jpg";
var url = new Array;
url[0] = "网址1";
url[1] = "网址2";
url[2] = "网址3";
url[3] = "网址4";
var count=0;
function autoPlayer(){
if(arr.length==count){count=0;}
document.getElementById("banner1").src=arr[count];
document.getElementById("link1").href=url[count];
count++;
}
var Timer = setInterval(autoPlayer,2000);
function clearTimer(){
clearInterval(Timer);
}
//鼠标悬停指定播放图片
function showbannerbyid(num){
clearTimer();
var index = parseInt(num);
document.getElementById("banner1").src=arr[index-1];
document.getElementById("link1").href=url[index-1];
count=index;
}
//鼠标离开恢复自动播放
function btnMouseOut(){
Timer = setInterval(autoPlayer,2000);
}
</script>
</head>
<body onLoad="chImg()">
<div id="gundong" style="margin-top: 10px; margin-left: 20px; position: relative; float: left;">
<div>
<a href="#" id="link1"><img src="images/1.jpg" id="banner1" /></a>
</div>
<div id="spanbtn">
<span onmouseover="showbannerbyid(1)" onmouseout="btnMouseOut()">1</span><span onmouseover="showbannerbyid(2)" onmouseout="btnMouseOut()">2</span><span onmouseover="showbannerbyid(3)" onmouseout="btnMouseOut()">3</span><span onmouseover="showbannerbyid(4)" onmouseout="btnMouseOut()">4</span>
</div>
</div>
</body>
</html>
