<marquee
scrolldelay="100"
direction="up"
onmouseover="this.stop()"
onmouseout="this.start()"><img
src="xxxxxxx"></marquee>
其中scrolldelay="100"
===>指滚动延迟时间,单位是毫秒ms,默认为90ms
direction="up"
===>指滚动方向,默认从左往右,可取的值为:up,down,left,right
onmouseover="this.stop()"
===>指鼠标悬停在图片上时,图片静止
onmouseout="this.start()"
===>指鼠标离开图片时,图片运动
希望对您有所帮助
图片滚动，实际上就是设置的一段时间之后切换下展示的图片。附件为完整的例子。
代码展示：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>图片切换效果</title>
<script src="RevealTrans.js"></script>
</head>
<body>
<style type="text/css">
.container{
width:280px
height:200px
border:1px solid #eee
position:relative
}
#idPicText{
background:#eee
line-height:25px
text-align:center
font-weight:bold
width:282px
white-space:nowrap
overflow:hidden
font-size:12px
}
#idPicText a{
text-decoration:none
color:#333
display:block
}
#idPicList img{
cursor:pointer
width:65px
height:50px
filter:alpha(opacity=50)
-moz-opacity: .5
opacity: .5
border:0
margin:10px
}
#idPicList img.on{
filter:alpha(opacity=100)
-moz-opacity: 1
opacity: 1
}
#idNum{ position:absoluteright:5pxbottom:5px}
#idNum li{
float: left
list-style:none
color: #fff
text-align: center
line-height: 16px
width: 16px
height: 16px
font-family: Arial
font-size: 12px
cursor: pointer
margin: 1px
border: 1px solid #707070
background-color: #060a0b
}
#idNum li.on{
line-height: 18px
width: 18px
height: 18px
font-size: 14px
border: 0
background-color: #ce0609
font-weight: bold
}
</style>
<div id="idShow" class="container">
</div>
<div id="idPicShow" class="container">
<ul id="idNum">
</ul>
</div>
<div id="idPicText"></div>
<div id="idPicList"></div>
<script>
var r = new RevealTrans("idShow")
//添加变换对象
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html')
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_2.jpg', '图片滑动展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html')
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_3.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html')
r.Start()
//////////////////////
var rvt = new RevealTrans("idPicShow")
//添加变换对象
rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html')
rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_2.jpg', '图片滑动展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html')
rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_3.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html')
var oList = $("idPicList"), oText = $("idPicText"), arrImg = []
var oNum = $("idNum"), arrNum = []
//设置图片列表
Each(rvt.List, function(list, i){
//图片式
var img = document.createElement("img")
img.src = list["img"]img.alt = list["text"]
arrImg[i] = img
oList.appendChild(img)
//按钮式
var li = document.createElement("li")
li.innerHTML = i + 1
arrNum[i] = li
oNum.appendChild(li)
//事件设置
img.onmouseover = li.onmouseover = function(){ rvt.Auto = falservt.Index = irvt.Start()}
img.onmouseout = li.onmouseout = function(){ rvt.Auto = truervt.Start()}
})
//设置图片列表样式 文本显示区域
rvt.onShow = function(){
var i = this.Index, list = this.List[i]
//图片式
Each(arrImg, function(o){ o.className = ""})arrImg[i].className = "on"
//按钮式
Each(arrNum, function(o){ o.className = ""})arrNum[i].className = "on"
//文本区域
oText.innerHTML = !!list.url ? "<a href='" + list.url + "' target='_blank'>" + list.text + "</a>" : list.text
}
//文本显示区域
oText.onmouseover = function(){ rvt.Auto = falservt.Stop()}
oText.onmouseout = function(){ rvt.Auto = truervt.Start()}
rvt.Start()
</script>
<br />
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0342339836871729"
/* 728x90, 创建于 10-1-26 */
google_ad_slot = "8648094726"
google_ad_width = 728
google_ad_height = 90
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</body>
</html>
效果图如下：
可以在js全局代码中，增加一个变量n，用作计数器，表示总图片数。
然后使用图片的onload事件，每成功加载一次图片，将计数器n减去1
当n变成0时，表示图片均加载完毕，这时即可开始执行其他JS代码。
具体示例代码：
var n=$pre4y_main.length...
$img[0].onload=function(){ ...
n--
if(!n){
//执行其他JS代码
}
}
