怎么用JS脚本使多张图片滚动？

JavaScript011

怎么用JS脚本使多张图片滚动？,第1张

推荐使用<marquee>实现图片滚动,示例:

<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代码

    }

}