给轮播的图片加超链接

鹿梓 2012-02-08 02:09:54 
<!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=gb2312" />

<title>图片轮播</title>

<script src="css/jquery-1.4.1.min.js" type="text/javascript"></script>

<script>

function showDaTu(src){

document.getElementById("defaultImg").src=src;

}

</script>

<script>

$(document).ready(function() {

        var index = 0;

        var count = $("table tr").eq(0).find("td img").length;

            setInterval(function(){

              $("#defaultImg").attr("src",$("table tr").eq(0).find("td img").eq(index).attr("src")); 

              if(++index>=count){

                  index=0; 

              }

            },3000);

        });

</script>



</head>



<body>

<table border="0">

	<tr>

	<td width="0">

    	<div id="ddd" style="display:none;">

      	<img src='images/06.jpg'>

		<img src='images/07.jpg'>

		<img src='images/08.jpg'>

		<img src='images/09.jpg'>

        <img src='images/10.jpg'></div>

    </td>

    </tr>

    <tr>

        <td>

        <img src='images/01.jpg' onmouseover="showDaTu('images/06.jpg')"><br />

        <img src='images/02.jpg' onmouseover="showDaTu('images/07.jpg')"><br />

        <img src='images/03.jpg' onmouseover="showDaTu('images/08.jpg')"><br />

        <img src='images/04.jpg' onmouseover="showDaTu('images/09.jpg')">

        </td>

        <td>

        <img src="images/10.jpg" id="defaultImg">

        </td>

    </tr>

</table>



</body>

</html>




怎么给轮播的每个图片都加一个不同的超链接？
...全文
1781 25 打赏 收藏 转发到动态 举报
写回复
用AI写文章
25 条回复
切换为时间正序
请发表友善的回复…
发表回复
suxiukui52099 2013-04-23
  • 打赏
  • 举报
 回复
着实的麻烦，对于我们这些小白，要是楼主能把代码里面的一些英文改成中文我们自己替换就好了 ，比如=1，第一张图，=“1图链接”=“1图片地址”=“图片尺寸”=“轮转时间”
晴空飞一鹤 2012-05-18
  • 打赏
  • 举报
 回复
哎，为什么我看不懂呢？
鹿梓 2012-02-14
  • 打赏
  • 举报
 回复
[Quote=引用 22 楼 fjasdlkgh 的回复:]
楼主啊，最后弱弱的说句~希望给你的js代码有所帮助，有所提高，一起努力好好学习，天天向上！
[/Quote]


大哥在么 问你个问题
fjasdlkgh 2012-02-08
  • 打赏
  • 举报
 回复
楼主啊，最后弱弱的说句~希望给你的js代码有所帮助，有所提高，一起努力好好学习，天天向上！
fjasdlkgh 2012-02-08
  • 打赏
  • 举报
 回复

关键你都说问题也不说清楚！你也不说清轮询哪些图片！~~~既然好了，给分吧。。。加点分~~~多给点啊~~
还有这个人tptptp00，他给你的jquery代码也是可行的，只是也需要稍微修改下。
fjasdlkgh 2012-02-08
  • 打赏
  • 举报
 回复

楼主~~~可以了不？行了的话给分拜。。
鹿梓 2012-02-08
  • 打赏
  • 举报
 回复
[Quote=引用 14 楼 fjasdlkgh 的回复:]
忘了，还要加个超链接，修改如下：
图片轮播：
<table border="0">
<tr>
<td id="td1">
<a href="href1"><img id='img1' src='images/01.jpg' onmouseover="showDaTu('images/01.jpg','href1')" /></a><br />
<a href="hr……
[/Quote]


搞定了搞定了。泪奔啊大哥
fjasdlkgh 2012-02-08
  • 打赏
  • 举报
 回复
代码你看不懂吗？要是轮询深藏的内容，改下脚本就行..
图片轮播：
<div id="ddd" style="display:none;">
<a href="href1"><img src='images/06.jpg'></a>
<a href="href2"><img src='images/06.jpg'></a>
<a href="href3"><img src='images/06.jpg'></a>
<a href="href4"><img src='images/06.jpg'></a>
<a href="href5"><img src='images/06.jpg'></a>
</div>

<table border="0">
<tr>
<td id="td1">
<a href="href1"><img src='images/01.jpg' onmouseover="showDaTu('images/01.jpg','href1')" /></a><br />
<a href="href2"><img src='images/02.jpg' onmouseover="showDaTu('images/02.jpg','href2')" /></a><br />
<a href="href3"><img src='images/03.jpg' onmouseover="showDaTu('images/03.jpg','href3')" /></a><br />
<a href="href4"><img src='images/04.jpg' onmouseover="showDaTu('images/04.jpg','href4')" /></a>
</td>
<td width="200px" height="100px">
<a id="defaulta"><img src="images/10.jpg" id="defaultImg" /></a>
</td>
</tr>
</table>
<script type="text/javascript">
var index=0;
var count=document.getElementById("ddd").getElementsByTagName("img").length;
if(count>0)
{
setInterval(showDaTuAuto,3000);
}
function showDaTuAuto()
{
var defaultImg=document.getElementById("defaultImg");
var defaulta=document.getElementById("defaulta");
defaultImg.src=document.getElementById("ddd").getElementsByTagName("img").item(index).src;
defaulta.href=document.getElementById("ddd").getElementsByTagName("a").item(index).href;
if(++index>=count)
{
index=0;
}
}
function showDaTu(src,href)
{
document.getElementById("defaultImg").src=src;
document.getElementById("defaulta").href=href;
}
</script>
tptptp00 2012-02-08
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 fjasdlkgh 的回复:]

<img src='images/01.jpg' _href="www.sina.com.cn/"><br />
图片哪来的_href属性！！！！！你是不是搞错了？
[/Quote]
自定义属性
鹿梓 2012-02-08
  • 打赏
  • 举报
 回复
[Quote=引用 14 楼 fjasdlkgh 的回复:]
忘了，还要加个超链接，修改如下：
图片轮播：
<table border="0">
<tr>
<td id="td1">
<a href="href1"><img id='img1' src='images/01.jpg' onmouseover="showDaTu('images/01.jpg','href1')" /></a><br />
<a href="hr……
[/Quote]


大哥轮播的图片不对啊

轮播的图片是
<tr>

    <td width="0">

        <div id="ddd" style="display:none;">

          <img src='images/06.jpg'>

        <img src='images/07.jpg'>

        <img src='images/08.jpg'>

        <img src='images/09.jpg'>

        <img src='images/10.jpg'></div>

    </td>

    </tr>
fjasdlkgh 2012-02-08
  • 打赏
  • 举报
 回复
<img src='images/01.jpg' _href="www.sina.com.cn/"><br />
图片哪来的_href属性！！！！！你是不是搞错了？
fjasdlkgh 2012-02-08
  • 打赏
  • 举报
 回复

忘了，还要加个超链接，修改如下：
图片轮播：
<table border="0">
<tr>
<td id="td1">
<a href="href1"><img id='img1' src='images/01.jpg' onmouseover="showDaTu('images/01.jpg','href1')" /></a><br />
<a href="href2"><img id='img2' src='images/02.jpg' onmouseover="showDaTu('images/02.jpg','href2')" /></a><br />
<a href="href3"><img id='img3' src='images/03.jpg' onmouseover="showDaTu('images/03.jpg','href3')" /></a><br />
<a href="href4"><img id='img4' src='images/04.jpg' onmouseover="showDaTu('images/04.jpg','href4')" /></a>
</td>
<td width="200px" height="100px">
<a id="defaulta"><img src="images/10.jpg" id="defaultImg" /></a>
</td>
</tr>
</table>
<script type="text/javascript">
var index=0;
var count=document.getElementById("td1").getElementsByTagName("img").length;
if(count>0)
{
setInterval(showDaTuAuto,3000);
}
function showDaTuAuto()
{
var defaultImg=document.getElementById("defaultImg");
var defaulta=document.getElementById("defaulta");
defaultImg.src=document.getElementById("td1").getElementsByTagName("img").item(index).src;
defaulta.href=document.getElementById("td1").getElementsByTagName("a").item(index).href;
if(++index>=count)
{
index=0;
}
}
function showDaTu(src,href)
{
document.getElementById("defaultImg").src=src;
document.getElementById("defaulta").href=href;
}
</script>
fjasdlkgh 2012-02-08
  • 打赏
  • 举报
 回复
原来你还需要用onmouseover事件啊，不早说。。。
你在试试：
图片轮播：
<table border="0">
<tr>
<td id="td1">
<a href="1"><img id='img1' src='images/01.jpg' onmouseover="showDaTu('images/01.jpg')" /></a><br />
<a href="2"><img id='img2' src='images/02.jpg' onmouseover="showDaTu('images/02.jpg')" /></a><br />
<a href="3"><img id='img3' src='images/03.jpg' onmouseover="showDaTu('images/03.jpg')" /></a><br />
<a href="4"><img id='img4' src='images/04.jpg' onmouseover="showDaTu('images/04.jpg')" /></a>
</td>
<td width="200px" height="100px">
<a id="defaulta"><img src="images/10.jpg" id="defaultImg" /></a>
</td>
</tr>
</table>
<script type="text/javascript">
var index=0;
var count=document.getElementById("td1").getElementsByTagName("img").length;
if(count>0)
{
setInterval(showDaTuAuto,3000);
}
function showDaTuAuto()
{
var defaultImg=document.getElementById("defaultImg");
var defaulta=document.getElementById("defaulta");
defaultImg.src=document.getElementById("td1").getElementsByTagName("img").item(index).src;
defaulta.href=document.getElementById("td1").getElementsByTagName("a").item(index).href;
if(++index>=count)
{
index=0;
}
}
function showDaTu(src)
{
document.getElementById("defaultImg").src=src;
}
</script>
鹿梓 2012-02-08
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 tptptp00 的回复:]
HTML code

<img src='images/01.jpg' _href="www.sina.com.cn/"><br />
<img src='images/01.jpg' _href="www.sina.com.cn/"><br />
<img src='images/01.jpg' _href="www.sina.com.cn/"><br />
<img src='……
[/Quote]


大哥 你把我上面的html全部拷贝下来 加上你的代码试一下 我试了真心不行。。。
鹿梓 2012-02-08
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 fjasdlkgh 的回复:]
我拷贝的是你之前的帖子的html...
http://topic.csdn.net/u/20120208/09/27301607-beef-4465-b5f8-c090e96f211c.html
[/Quote]


大哥。。。

那你把这个拷贝下来试试。。。
fjasdlkgh 2012-02-08
  • 打赏
  • 举报
 回复
我拷贝的是你之前的帖子的html...
http://topic.csdn.net/u/20120208/09/27301607-beef-4465-b5f8-c090e96f211c.html
鹿梓 2012-02-08
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 fjasdlkgh 的回复:]
加加超链接。也不难，在加个a标签就可以：
代码如下，直接复制粘贴：
图片轮播：
<table border="0">
<tr>
<td id="td1">
<a href="1"><img id='img1' src='images/01.jpg' /></a><br />
<a href="2"><img id='img2' src='images/02.jpg……
[/Quote]

大哥。。。你把我的html页拷下来在这个基础上弄 你测试的跟我要实现的效果不一样。。。
tptptp00 2012-02-08
  • 打赏
  • 举报
 回复 


<img src='images/01.jpg'  _href="www.sina.com.cn/"><br />

<img src='images/01.jpg'  _href="www.sina.com.cn/"><br />

<img src='images/01.jpg'  _href="www.sina.com.cn/"><br />

<img src='images/01.jpg'  _href="www.sina.com.cn/"><br />





var index = 0;

            var count = $("table tr").eq(0).find("td img").length;

            setInterval(function() {

                var obj = $("table tr").eq(0).find("td img").eq(index);

                $("#defaultImg").attr("src", obj.attr("src"));

                if ($("#defaulta").length > 0) {

                    $("#defaulta").attr("href", obj.attr("_href"));

                } else {

                $("#defaultImg").wrap('<a id="defaulta" href="' + obj.attr("_href") + '"></a>');

                }

                if (++index >= count) {

                    index = 0;

                }

            }, 3000);
fjasdlkgh 2012-02-08
  • 打赏
  • 举报
 回复
简单的小问题，不需要jquery都行，总是用jquery，时间长了会有点傻瓜式。
小问题最好自己编写js，对脚本掌握有很好的帮助的。
fjasdlkgh 2012-02-08
  • 打赏
  • 举报
 回复
加加超链接。也不难，在加个a标签就可以：
代码如下，直接复制粘贴：
图片轮播：
<table border="0">
<tr>
<td id="td1">
<a href="1"><img id='img1' src='images/01.jpg' /></a><br />
<a href="2"><img id='img2' src='images/02.jpg' /></a><br />
<a href="3"><img id='img3' src='images/03.jpg' /></a><br />
<a href="4"><img id='img4' src='images/04.jpg' /></a>
</td>
<td width="200px" height="100px">
<a id="defaulta"><img src="images/10.jpg" id="defaultImg" /></a>
</td>
</tr>
</table>
<script type="text/javascript">
var index=0;
var count=document.getElementById("td1").getElementsByTagName("img").length;
if(count>0)
{
setInterval(showDaTu,1000);
}
function showDaTu()
{
var defaultImg=document.getElementById("defaultImg");
var defaulta=document.getElementById("defaulta");
defaultImg.src=document.getElementById("td1").getElementsByTagName("img").item(index).src;
defaulta.href=document.getElementById("td1").getElementsByTagName("a").item(index).href;
if(++index>=count)
{
index=0;
}
}
</script>
这次你在不给分，我举报你。
加载更多回复（5）
JacvaScript网页图片轮播代码
使用jquery+js原生代码编写，可实现网页图片宽幅轮播，可直接在css文件中调整格式，在HTML页面中修改图片及超链接路径。
7款H5自适应广告轮播图代码免费下载
7款H5自适应广告轮播图代码免费下载，主要用于网站首页图文轮播风格的调用、广告图片代码图片超链接。适用于手机端、电脑端、平板等其他设备！ 代码特点： 采用HTML5响应式展示效果。 有其中6款自动轮播代码自动播放。 代码不会增加网站运行负荷，不影响网站运行速度。 简单，容易调用。 在线演示地址：http://www.0377360.cn/?p=206
AI人工智能毕业设计课题：黑白怀旧照片图片网站和上色处理系统
图片分类：录入、修改、查看、删除图片分类 录入图片：录入图片标题、内容等信息 管理图片：查看已录入图片列表，支持删除和修改 图片评论列表：所有用户的评论信息列表 图片评论管理：支持对评论信息审核，删除；...
淘宝装修代码集合
集合淘宝轮播代码 适用于拓展版以上版本 轮播代码 图片超链接
day05-bootStrap.zip
通过Bootstrap框架简单制作网页商城 包括图片轮播 导航栏 超链接
.NET社区

62,046

社区成员

669,049

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章