javascript如何在轮播图图片加入超链接

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

温馨提示:内容为网友见解,仅供参考
无其他回答

...请教高手,JS里怎么加代码加在哪儿,使五张轮播图片加上超链接?没分...
把这段替换到对应的地方,然后把 #改成你要链接的地方即可

js控制的首页轮播图,在加上a标签链接标识后,不起作用,图片上形不成链接...
通过百度“nivoslider 参数”helloweba这个网站有下载demo里就带链接的 另外根据你的思路可以这样 \/\/把url作为jump的参数function jump(tarUrl){ window.open(tarUrl);}

网页制作中如何制作滚动图片
首先,确保您已引入 jQuery 库。然后,在 HTML 文件中为滚动图片添加容器元素和图片元素,容器元素应包含类名或 ID,例如: 接下来,在 JavaScript 中编写以下代码来实现滚动功能:定义变量以初始化序列和轮播定时器:var_index=0; vartimePlay=null; 显示初始图片并隐藏其他图片:$('#AdvImgList').e...

下面的代码怎么修改,能实现图片轮播
1. 通过js控制图片的显隐来实现轮播:实现简单;通过定时器切换图片。这种方式我博客里有关键代码,可以百度以下内容查看:使用javascript,jquery实现的图片轮播功能[xyytIT]2. 通过定位方式,使图片按照从左到右,或上下的顺序排列,这种效果比较好,但是实现起来,比较麻烦;目前京东,淘宝一些大型的网站用...

怎么控制这段代码图片轮播的速度
1.最后的这句话 调用了www.yangtse.com的一个叫做focus1.js的脚本文件 因为现在文件在别人网站上 你不能够直接修改 所以要先把这个js文件下载下来放到本地 2.用ie游览器 直接访问http:\/\/www.yangtse.com\/images\/focus1.js 这个地址 把这个js文件下载下来放到你的页面文件夹里 然后HTML部分的调用路劲修改为本地...

网页的图片轮播是怎么实现的
1. 设计轮播结构:使用HTML创建包含图片的轮播结构,可以是一个包含多张图片的容器或者多个带有图片的链接列表。2. 添加样式:通过CSS为轮播图片添加样式,包括大小调整、边框设计以及过渡效果的设置等。同时,可以利用CSS动画属性设置切换动画的时间和效果。3. 实现逻辑控制:使用JavaScript添加轮播逻辑,包括...

谁会弄那种12345轮播图片 带链接的 用HTML语言能实现吗. 反正不能用JS...
\/\/主函数 var s=function(){ var interv=2000; \/\/切换间隔时间 var interv2=10; \/\/切换速速 var opac1=80; \/\/文字背景的透明度 var source="fade_focus" \/\/焦点轮换图片容器的id名称 \/\/获取对象 function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else...

dreamweaver如何实现下面这个轮番播放图片的功能功能,不用代码直接操作...
1、轮播效果一般通过javascript的settimeout函数定时运行图片切换,用dw可以实现 2、不写代码法也是行的,在你的浏览器上按文件->另存为->网页\/全部->点击保存 3、dw打开保存下来的htm文件,在设计版面中点击该轮播处,转至效果代码,然后把代码复制下来,然后用通配符,搜索图片格式(*.jpg,*.bmp或*...

淘宝自定义模块图片轮播不动了是怎么回事
这个需要旺铺标准版以上。然后再装修页面中点击添加模板选择图片轮播。插入你图片的地址,然后在下面的超链接地址填入你要连接到的宝贝的地址即可。然后别忘了发布哦。自定义区不支持JavaScript语言所以无法使用轮播图片代码,自定义地区连div+css都不能很好支持别说JavaScript语言了。代码给你个网址自己看吧,...

js定时器轮播图?
点击第一张图片时,同左边按钮点击无缝轮播。点击最后一张图片时,同右边按钮点击无缝轮播。浅谈js写轮播图的思路与心得1、首先我们需要在开始时将我们锁需要的封装函数链接进来。列如scripttype="text\/javascript"src="animate-2.0.1.js"\/script 而且我们必须得得到所有需要用到的对象用getElementById、...

相似回答