js图片轮播

qq346291119 2012-02-08 09:16:07
<!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>
function showDaTu(src){
document.getElementById("defaultImg").src=src;
}
</script>

</head>

<body>
<table border="0">
<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>



只能鼠标移动到上面的时候改变图片 怎么加个轮播效果
...全文
845 22 打赏 收藏 转发到动态 举报
写回复
用AI写文章
22 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq346291119 2012-02-08
  • 打赏
  • 举报
回复
[Quote=引用 16 楼 tptptp00 的回复:]
换掉是什么意思?
<img src='image/pic/0-3ckZy0.jpg' width="50px" height="50"><br />
<img src='image/pic/01300000194882122148214747150.jpg' width="50px" height="50" ><br />
<img src='image/pic/05.jpg'wid……
[/Quote]


好吧。我已经弄好了 就是又有个新问题 就是要在轮播的图片中加超链接 这个怎么弄啊。。。
qq346291119 2012-02-08
  • 打赏
  • 举报
回复
[Quote=引用 18 楼 fjasdlkgh 的回复:]
直接复制粘贴就可以用,自己看看研究下,很简单:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>图片轮播</title>
</head>
<body>
<form id="form1" runat="server">
第一种:table的方式
<div id="ma……
[/Quote]

先运行一下我贴出来的页面看看什么形式的好不好。。。
fjasdlkgh 2012-02-08
  • 打赏
  • 举报
回复
直接复制粘贴就可以用,自己看看研究下,很简单:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>图片轮播</title>
</head>
<body>
<form id="form1" runat="server">
第一种:table的方式
<div id="marquePic" style="overflow:hidden; width:100px;">
<table border="0" align="center" cellpadding="0" cellspacing="0" cellspace="0" >
<tr>
<td valign="top" bgcolor="ffffff" id="marquePic1">
<table width="90%" border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td><a href="#" target="new"><img border="0" src="image/iecool001.gif" /></a></td>
<td><a href="#" target="new"><img border="0" src="image/iecool002.gif" /></a></td>
<td><a href="#" target="new"><img border="0" src="image/iecool003.gif" /></a></td>
<td><a href="#" target="new"><img border="0" src="image/iecool004.gif" /></a></td>
<td><a href="#" target="new"><img border="0" src="image/iecool005.gif" /></a></td>
</tr>
</table>
</td>
<td id="marquePic2" valign="top"></td>
</tr>
</table>
</div>

<script type="text/javascript">
var speed=30 ;
marquePic2.innerHTML=marquePic1.innerHTML;
function MarqueePic()
{
if(marquePic.scrollLeft>=marquePic1.scrollWidth)
{
marquePic.scrollLeft=0;
}
else
{
marquePic.scrollLeft++;
}
}
var MyMarquee=setInterval(MarqueePic,speed);
marquePic.onmouseover=function()
{
clearInterval(MyMarquee);
}
marquePic.onmouseout=function()
{
MyMarquee=setInterval(MarqueePic,speed);
}
</script>

<br />第二种:div的方式
<div id="demo" style="overflow:hidden; width:100px;">
<div id="indemo" style="width:800%">
<div id="demo1" style="float:left;">
<div style="letter-spacing:-4px;">
<a href="#" target="new"><img border="0" src="image/iecool001.gif" /></a>
<a href="#" target="new"><img border="0" src="image/iecool002.gif" /></a>
<a href="#" target="new"><img border="0" src="image/iecool003.gif" /></a>
<a href="#" target="new"><img border="0" src="image/iecool004.gif" /></a>
<a href="#" target="new"><img border="0" src="image/iecool005.gif" /></a>
</div>
</div>
<div id="demo2" style="float:left"></div>
</div>
</div>

<script type="text/javascript" language="javascript">
var speed = 30;
demo2.innerHTML = demo1.innerHTML;
function Marquee()
{
if(demo.scrollLeft>=demo2.offsetWidth)
{
demo.scrollLeft=demo.scrollLeft-demo1.offsetWidth;
}
else
{
demo.scrollLeft++;
}
}
var MyMar = setInterval(Marquee, speed);
demo.onmouseover = function()
{
clearInterval(MyMar);
}
demo.onmouseout = function()
{
MyMar = setInterval(Marquee, speed);
}
</script>
</form>
</body>
</html>
楼主给分吧~
chai1338 2012-02-08
  • 打赏
  • 举报
回复
这种特效我习惯去懒人图库找一个
tptptp00 2012-02-08
  • 打赏
  • 举报
回复
换掉是什么意思?
<img src='image/pic/0-3ckZy0.jpg' width="50px" height="50"><br />
<img src='image/pic/01300000194882122148214747150.jpg' width="50px" height="50" ><br />
<img src='image/pic/05.jpg'width="50px" height="50" ><br />
<img src='image/pic/07.jpg' width="50px" height="50"">
把这里的链接换掉不就可以了
qq346291119 2012-02-08
  • 打赏
  • 举报
回复
[Quote=引用 12 楼 tptptp00 的回复:]
lz才接触js? 你把鼠标移上去那个事件加上不就可以了 轮播的图片不就是td里面的?
[/Quote]


可以了 现在就是怎么把轮播的图片换掉 。。。
qq346291119 2012-02-08
  • 打赏
  • 举报
回复
[Quote=引用 12 楼 tptptp00 的回复:]
lz才接触js? 你把鼠标移上去那个事件加上不就可以了 轮播的图片不就是td里面的?
[/Quote]

轮播的图片不是td里面的 是我刚开始写的onmouseover="showDaTu('images/06.jpg')"这个。。。
qq346291119 2012-02-08
  • 打赏
  • 举报
回复
[Quote=引用 12 楼 tptptp00 的回复:]
lz才接触js? 你把鼠标移上去那个事件加上不就可以了 轮播的图片不就是td里面的?
[/Quote]


我确实是刚接触js的。。。

我加上去了 不知道有冲突还是怎么的 还是不行啊
tptptp00 2012-02-08
  • 打赏
  • 举报
回复
lz才接触js? 你把鼠标移上去那个事件加上不就可以了 轮播的图片不就是td里面的?
qq346291119 2012-02-08
  • 打赏
  • 举报
回复
[Quote=引用 10 楼 tptptp00 的回复:]
JScript code

<script type="text/javascript" src="JS/jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function() {
var index = 0;
var count = $("table tr").eq(0).find("t……
[/Quote]


轮播的图片是另外的图片 还有当鼠标移动到上面的时候就不会更换图片了
tptptp00 2012-02-08
  • 打赏
  • 举报
回复

<script type="text/javascript" src="JS/jquery-1.4.3.min.js"></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>


<table border="1">
<tr>
<td>
<img src='image/pic/0-3ckZy0.jpg' width="50px" height="50"><br />
<img src='image/pic/01300000194882122148214747150.jpg' width="50px" height="50" ><br />
<img src='image/pic/05.jpg'width="50px" height="50" ><br />
<img src='image/pic/07.jpg' width="50px" height="50"">
</td>
<td>
<img src="image/pic/07.jpg" id="defaultImg" style=" width:100px; height:100px;">
</td>
</tr>
</table>
qq346291119 2012-02-08
  • 打赏
  • 举报
回复
[Quote=引用 8 楼 zx75991 的回复:]
如果不需要什么特效,就用js自己写一个。
[/Quote]

贴出来的js已经是我的极限了。。。
天下在我心 2012-02-08
  • 打赏
  • 举报
回复
如果不需要什么特效,就用js自己写一个。
村长_乐 2012-02-08
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 lhqdyy9 的回复:]

http://www.jqueryajax.com/jquery/961.html
可以参考一下
[/Quote]


这个不错
qq346291119 2012-02-08
  • 打赏
  • 举报
回复
[Quote=引用 5 楼 tptptp00 的回复:]
你引入jquery框架的js木有
[/Quote]

引入了
tptptp00 2012-02-08
  • 打赏
  • 举报
回复
你引入jquery框架的js木有
qq346291119 2012-02-08
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 tptptp00 的回复:]
JScript code

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")); ……
[/Quote]


贴一下完整的好么 我弄到我的页面中不行啊
Ny-6000 2012-02-08
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 lhqdyy9 的回复:]
http://www.jqueryajax.com/jquery/961.html
可以参考一下
[/Quote]
tptptp00 2012-02-08
  • 打赏
  • 举报
回复

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)

老猫五号 2012-02-08
  • 打赏
  • 举报
回复
http://www.jqueryajax.com/jquery/961.html
可以参考一下
加载更多回复(2)

62,025

社区成员

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

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

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

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