您的位置：程序门 -> web 开发 -> javascript

菜鸟100分请教走马灯效果.急!!在线等..

[收藏此页] [打印本页]选择字色：背景色：字体：[大][中][小]

菜鸟100分请教走马灯效果.急!!在线等..

发表于：2007-04-02 10:49:38 楼主

我想实现多个表格嵌套的图片走马灯效果.应该怎么实现.代码如下:
<table width= "92% " height= "129 " border= "1 " align= "right " cellpadding= "0 " cellspacing= "0 ">

<tr>

<td align= "center " valign= "middle "> <div class= "img_1 ">
<table width= "76 " height= "76 " border= "0 " cellpadding= "0 " cellspacing= "0 " background= "images/img/bg_1.gif ">
<tr>

<td align= "center " valign= "middle "> <img src= "imgs/girl/coat/1.gif " width= "33 " height= "67 " border= "0 " style= "cursor :hand; " sex= "women " tag= "coat " onclick= "eventclick（this) "/> </td>
</tr>
</table>
</div>
</td>

<td align= "center " valign= "middle "> <div class= "img_1 ">
<table width= "76 " height= "76 " border= "0 " cellpadding= "0 " cellspacing= "0 " background= "images/img/bg_1.gif ">
<tr>
<td align= "center " valign= "middle "> <img src= "imgs/girl/coat/2.gif " width= "42 " height= "57 " border= "0 " style= "cursor :hand; " sex= "women " tag= "coat " onclick= "eventclick（this) "/> </td>
</tr>
</table>
</div>
</td>

<td align= "center " valign= "middle "> <div class= "img_1 ">
<table width= "76 " height= "76 " border= "0 " cellpadding= "0 " cellspacing= "0 " background= "images/img/bg_1.gif ">
<tr>
<td align= "center " valign= "middle "> <img src= "imgs/girl/coat/3.gif " width= "42 " height= "49 " border= "0 " style= "cursor :hand; " sex= "women " tag= "coat " onclick= "eventclick（this) "/> </td>
</tr>
</table>
</div>
</td>

<td align= "center " valign= "middle "> <div class= "img_1 ">
<table width= "76 " height= "76 " border= "0 " cellpadding= "0 " cellspacing= "0 " background= "images/img/bg_1.gif ">
<tr>
<td align= "center " valign= "middle "> <img src= "imgs/girl/coat/4.gif " width= "42 " height= "68 " border= "0 " style= "cursor :hand; " sex= "women " tag= "coat " onclick= "eventclick（this) "/> </td>
</tr>
</table>
</div>
</td>

<td align= "center " valign= "middle "> <div class= "img_1 ">
<table width= "76 " height= "76 " border= "0 " cellpadding= "0 " cellspacing= "0 " background= "images/img/bg_1.gif ">
<tr>
<td align= "center " valign= "middle "> <img src= "imgs/girl/coat/5.gif " width= "60 " height= "77 " border= "0 " style= "cursor :hand; " sex= "women " tag= "coat " onclick= "eventclick（this) "/> </td>
</tr>
</table>
</div>
</td>
</td>
</tr>

<tr>
<td align= "center " valign= "middle "> <div class= "img_2_1 "> <a href= "# "> 此处显示 </a> </div> </td>
<td align= "center " valign= "middle "> <div class= "img_2_1 "> <a href= "# "> 此处显示 </a> </div> </td>
<td align= "center " valign= "middle "> <div class= "img_2_1 "> <a href= "# "> 此处显示 </a> </div> </td>
<td align= "center " valign= "middle "> <div class= "img_2_1 "> <a href= "# "> 此处显示 </a> </div> </td>
<td align= "center " valign= "middle "> <div class= "img_2_1 "> <a href= "# "> 此处显示 </a> </div> </td>
</tr>

</table>

发表于：2007-04-02 10:57:261楼得分:0

帮顶一下

发表于：2007-04-02 11:05:232楼得分:0

用 "图片走马灯 "在google或百度中搜索一下，很多的

发表于：2007-04-02 15:55:193楼得分:0

我也是找的~~~
应改显示出图片横向滚动的效果
<script language= "javascript1.2 ">

//specify the slider 's width （in pixels)
var sliderwidth=300
//specify the slider 's height
var sliderheight=150
//specify the slider 's slide speed （larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor= "#eaeaea "

//specify the slider 's images
var leftrightslide=new array（)
var finalslide= ' '
leftrightslide[0]= ' <a href= "http://www.jzzy.com "> <img src= "photo/dynamicbook200211061.gif " border=1> </a> '
leftrightslide[1]= ' <a href= "http://www.jzzy.com "> <img src= "photo/dynamicbook200211062.gif " border=1> </a> '
leftrightslide[2]= ' <a href= "http://www.jzzy.com "> <img src= "photo/dynamicbook200211063.gif " border=1> </a> '
leftrightslide[3]= ' <a href= "http://www.jzzy.com "> <img src= "photo/dynamicbook200211064.gif " border=1> </a> '
leftrightslide[4]= ' <a href= "http://www.jzzy.com "> <img src= "photo/dynamicbook200211065.gif " border=1> </a> '

////no need to edit below this line////////////

var copyspeed=slidespeed
leftrightslide= ' <nobr> '+leftrightslide.join（ " ")+ ' </nobr> '
var iedom=document.all ¦ ¦document.getelementbyid
if （iedom)
document.write（ ' <span id= "temp " style= "visibility:hidden;position:absolute;top:-100;left:-3000 "> '+leftrightslide+ ' </span> ')
var actualwidth= ' '
var cross_slide, ns_slide

function fillup（){
if （iedom){
cross_slide=document.getelementbyid? document.getelementbyid（ "test2 ") : document.all.test2
cross_slide2=document.getelementbyid? document.getelementbyid（ "test3 ") : document.all.test3
cross_slide.innerhtml=cross_slide2.innerhtml=leftrightslide
actualwidth=document.all? cross_slide.offsetwidth : document.getelementbyid（ "temp ").offsetwidth
cross_slide2.style.left=actualwidth+20
}
else if （document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write（leftrightslide)
ns_slide.document.close（)
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+20
ns_slide2.document.write（leftrightslide)
ns_slide2.document.close（)
}
lefttime=setinterval（ "slideleft（) ",30)
}
window.onload=fillup

function slideleft（){
if （iedom){
if （parseint（cross_slide.style.left)> （actualwidth*（-1)+8))
cross_slide.style.left=parseint（cross_slide.style.left)-copyspeed
else
cross_slide.style.left=parseint（cross_slide2.style.left)+actualwidth+30

if （parseint（cross_slide2.style.left)> （actualwidth*（-1)+8))
cross_slide2.style.left=parseint（cross_slide2.style.left)-copyspeed
else
cross_slide2.style.left=parseint（cross_slide.style.left)+actualwidth+30

}
else if （document.layers){
if （ns_slide.left> （actualwidth*（-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+30

if （ns_slide2.left> （actualwidth*（-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+30
}
}

if （iedom ¦ ¦document.layers){
with （document){
document.write（ ' <table border= "0 " cellspacing= "0 " cellpadding= "0 "> <td> ')
if （iedom){
write（ ' <div style= "position:relative;width: '+sliderwidth+ ';height: '+sliderheight+ ';overflow:hidden "> ')
write（ ' <div style= "position:absolute;width: '+sliderwidth+ ';height: '+sliderheight+ ';background-color: '+slidebgcolor+ ' " onmouseover= "copyspeed=0 " onmouseout= "copyspeed=slidespeed "> ')
write（ ' <div id= "test2 " style= "position:absolute;left:0;top:0 "> </div> ')
write（ ' <div id= "test3 " style= "position:absolute;left:-1000;top:0 "> </div> ')
write（ ' </div> </div> ')
}
else if （document.layers){
write（ ' <ilayer width= '+sliderwidth+ ' height= '+sliderheight+ ' name= "ns_slidemenu " bgcolor= '+slidebgcolor+ '> ')
write（ ' <layer name= "ns_slidemenu2 " left=0 top=0 onmouseover= "copyspeed=0 " onmouseout= "copyspeed=slidespeed "> </layer> ')
write（ ' <layer name= "ns_slidemenu3 " left=0 top=0 onmouseover= "copyspeed=0 " onmouseout= "copyspeed=slidespeed "> </layer> ')
write（ ' </ilayer> ')
}
document.write（ ' </td> </table> ')
}
}
</script>

发表于：2007-04-02 16:09:554楼得分:0

网上太多了

发表于：2007-04-02 16:21:175楼得分:0

内容比较长，分开回复，代码出自孟子e章的无间断代码
<div style= "width:604px;height:150px;overflow:hidden " onmouseover= "stop（) " onmouseout= "start（) ">
<table cellspacing=0 cellpadding=0 border=0 width= "100% " id= "scrollimg ">
<tr valign= "middle " align= "center ">
<td align= "left " width= "1800 " valign=top > <table width= "92% " height= "129 " border= "1 " align= "right " cellpadding= "0 " cellspacing= "0 ">

<tr>

<td align= "center " valign= "middle "> <div class= "img_1 ">
<table width= "76 " height= "76 " border= "0 " cellpadding= "0 " cellspacing= "0 " background= "images/img/bg_1.gif ">
<tr>

<td align= "center " valign= "middle "> <img src= "imgs/girl/coat/1.gif " width= "33 " height= "67 " border= "0 " style= "cursor :hand; " sex= "women " tag= "coat " onclick= "eventclick（this) "/> </td>
</tr>
</table>
</div>
</td>

<td align= "center " valign= "middle "> <div class= "img_1 ">
<table width= "76 " height= "76 " border= "0 " cellpadding= "0 " cellspacing= "0 " background= "images/img/bg_1.gif ">
<tr>
<td align= "center " valign= "middle "> <img src= "imgs/girl/coat/2.gif " width= "42 " height= "57 " border= "0 " style= "cursor :hand; " sex= "women " tag= "coat " onclick= "eventclick（this) "/> </td>
</tr>
</table>
</div>
</td>

<td align= "center " valign= "middle "> <div class= "img_1 ">
<table width= "76 " height= "76 " border= "0 " cellpadding= "0 " cellspacing= "0 " background= "images/img/bg_1.gif ">
<tr>
<td align= "center " valign= "middle "> <img src= "imgs/girl/coat/3.gif " width= "42 " height= "49 " border= "0 " style= "cursor :hand; " sex= "women " tag= "coat " onclick= "eventclick（this) "/> </td>
</tr>
</table>
</div>
</td>

<td align= "center " valign= "middle "> <div class= "img_1 ">
<table width= "76 " height= "76 " border= "0 " cellpadding= "0 " cellspacing= "0 " background= "images/img/bg_1.gif ">
<tr>
<td align= "center " valign= "middle "> <img src= "imgs/girl/coat/4.gif " width= "42 " height= "68 " border= "0 " style= "cursor :hand; " sex= "women " tag= "coat " onclick= "eventclick（this) "/> </td>
</tr>
</table>
</div>
</td>

<td align= "center " valign= "middle "> <div class= "img_1 ">
<table width= "76 " height= "76 " border= "0 " cellpadding= "0 " cellspacing= "0 " background= "images/img/bg_1.gif ">
<tr>
<td align= "center " valign= "middle "> <img src= "imgs/girl/coat/5.gif " width= "60 " height= "77 " border= "0 " style= "cursor :hand; " sex= "women " tag= "coat " onclick= "eventclick（this) "/> </td>
</tr>
</table>
</div>
</td>
</td>
</tr>

<tr>
<td align= "center " valign= "middle "> <div class= "img_2_1 "> <a href= "# "> 此处显示 </a> </div> </td>
<td align= "center " valign= "middle "> <div class= "img_2_1 "> <a href= "# "> 此处显示 </a> </div> </td>
<td align= "center " valign= "middle "> <div class= "img_2_1 "> <a href= "# "> 此处显示 </a> </div> </td>
<td align= "center " valign= "middle "> <div class= "img_2_1 "> <a href= "# "> 此处显示 </a> </div> </td>
<td align= "center " valign= "middle "> <div class= "img_2_1 "> <a href= "# "> 此处显示 </a> </div> </td>
</tr>

</table> </td>

发表于：2007-04-02 16:21:326楼得分:0

<td align= "left " width= "900 " valign=top bgcolor= "#f4f4f4 "> <table width= "92% " height= "129 " border= "1 " align= "right " cellpadding= "0 " cellspacing= "0 ">

<tr>

<td align= "center " valign= "middle "> <div class= "img_1 ">
<table width= "76 " height= "76 " border= "0 " cellpadding= "0 " cellspacing= "0 " background= "images/img/bg_1.gif ">
<tr>

<td align= "center " valign= "middle "> <img src= "imgs/girl/coat/1.gif " width= "33 " height= "67 " border= "0 " style= "cursor :hand; " sex= "women " tag= "coat " onclick= "eventclick（this) "/> </td>
</tr>
</table>
</div>
</td>

<td align= "center " valign= "middle "> <div class= "img_1 ">
<table width= "76 " height= "76 " border= "0 " cellpadding= "0 " cellspacing= "0 " background= "images/img/bg_1.gif ">
<tr>
<td align= "center " valign= "middle "> <img src= "imgs/girl/coat/2.gif " width= "42 " height= "57 " border= "0 " style= "cursor :hand; " sex= "women " tag= "coat " onclick= "eventclick（this) "/> </td>
</tr>
</table>
</div>
</td>

<td align= "center " valign= "middle "> <div class= "img_1 ">
<table width= "76 " height= "76 " border= "0 " cellpadding= "0 " cellspacing= "0 " background= "images/img/bg_1.gif ">
<tr>
<td align= "center " valign= "middle "> <img src= "imgs/girl/coat/3.gif " width= "42 " height= "49 " border= "0 " style= "cursor :hand; " sex= "women " tag= "coat " onclick= "eventclick（this) "/> </td>
</tr>
</table>
</div>
</td>

<td align= "center " valign= "middle "> <div class= "img_1 ">
<table width= "76 " height= "76 " border= "0 " cellpadding= "0 " cellspacing= "0 " background= "images/img/bg_1.gif ">
<tr>
<td align= "center " valign= "middle "> <img src= "imgs/girl/coat/4.gif " width= "42 " height= "68 " border= "0 " style= "cursor :hand; " sex= "women " tag= "coat " onclick= "eventclick（this) "/> </td>
</tr>
</table>
</div>
</td>

<td align= "center " valign= "middle "> <div class= "img_1 ">
<table width= "76 " height= "76 " border= "0 " cellpadding= "0 " cellspacing= "0 " background= "images/img/bg_1.gif ">
<tr>
<td align= "center " valign= "middle "> <img src= "imgs/girl/coat/5.gif " width= "60 " height= "77 " border= "0 " style= "cursor :hand; " sex= "women " tag= "coat " onclick= "eventclick（this) "/> </td>
</tr>
</table>
</div>
</td>
</td>
</tr>

<tr>
<td align= "center " valign= "middle "> <div class= "img_2_1 "> <a href= "# "> 此处显示 </a> </div> </td>
<td align= "center " valign= "middle "> <div class= "img_2_1 "> <a href= "# "> 此处显示 </a> </div> </td>
<td align= "center " valign= "middle "> <div class= "img_2_1 "> <a href= "# "> 此处显示 </a> </div> </td>
<td align= "center " valign= "middle "> <div class= "img_2_1 "> <a href= "# "> 此处显示 </a> </div> </td>
<td align= "center " valign= "middle "> <div class= "img_2_1 "> <a href= "# "> 此处显示 </a> </div> </td>
</tr>

</table> </td>

</tr>
</table>
</div>
<script language= "javascript ">
var tm=null
function newsscroll（) {
var scrollimg=document.getelementbyid（ "scrollimg ")
if（scrollimg.parentnode.scrollleft!=（scrollimg.clientwidth/2))
scrollimg.parentnode.scrollleft++;
else
scrollimg.parentnode.scrollleft=0
}
window.onload=function（) {
tm=setinterval（ 'newsscroll（) ',20)
}
function stop（)
{
clearinterval（tm)
}

function start（)
{
tm=setinterval（ 'newsscroll（) ',20)
}
</script>

发表于：2007-04-02 16:22:137楼得分:0

代码的主要思想就是把两个td的内容设置成要滚动的内容

发表于：2007-04-03 14:56:118楼得分:0

我试过了.还是不行啊.只滚动了一下就停住了..单个td 内容滚动我会做.但是两个它就不动了.

发表于：2007-04-03 15:01:229楼得分:0

那段代码是有些问题，给你个简化的吧，把那两个img换成你自己的东西
<div style= "width:300px;height:150px;overflow:hidden " onmouseover= "stop（) " onmouseout= "start（) ">
<table cellspacing=0 cellpadding=0 border=0 width= "100% " id= "scrollimg ">
<tr valign= "middle " align= "center ">
<td align= "left " width= "1800 " valign=top > <img src= "http://zi.csdn.net/ebay_300.60.gif "> </td>

<td align= "left " width= "900 " valign=top bgcolor= "#f4f4f4 "> <img src= "http://zi.csdn.net/ebay_300.60.gif "> </td>

</tr>
</table>
</div>
<script language= "javascript ">
var tm=null
function newsscroll（) {
var scrollimg=document.getelementbyid（ "scrollimg ")
if（scrollimg.parentnode.scrollleft!=（scrollimg.clientwidth/2))
scrollimg.parentnode.scrollleft++;
else
scrollimg.parentnode.scrollleft=0
}
window.onload=function（) {
tm=setinterval（ 'newsscroll（) ',20)
}
function stop（)
{
clearinterval（tm)
}

function start（)
{
tm=setinterval（ 'newsscroll（) ',20)
}
</script>

发表于：2007-04-03 15:35:2810楼得分:0

谢谢你（hbhbhbhbhb1021（天外水火（))).我这里是一个两行五列的表格...不是一个一行几列的.

发表于：2007-04-03 15:43:3611楼得分:0

不要紧，用tbale把你的代码装进去，然后把tbale都写在那两个td里面，

发表于：2007-04-03 16:07:5512楼得分:0

可以实现了.但不是理想的那种.标签不能一一对应图片.中间有间隔..还是用分页显示算了.谢谢你（hbhbhbhbhb1021（天外水火（我要多努力)))

下一篇：哈哈看下这个太酷了，如何实现这样的拖动？
上一篇：为什么（正则问题）

其他资讯