JavaScript代码实现图片循环滚动效果

JavaScript014

JavaScript代码实现图片循环滚动效果,第1张

1.概述

循环滚动图片，不仅可以增添Web页面的动态效果，而且可以节省页面空间，有效地保证在有限的页面中显示更多的图片。

2.技术要点

主要应用setTimeout()方法实现图片的循环滚动效果。setTimeout()方法的语法格式如下：

setTimeout（function,milliseconds,[arguments]）

参数说明：

a.

function：要调用的JavaScript自定义函数名称。

b.

Milliseconds：设置超时时间（以毫秒为单位）。

功能：经过超时时间后，调用函数。此值可以用clearTimeout()函数清除。

3.具体实现

（1）在页面的合适位置添加一个id属性为demo的<div>标记，并在该标记中添加表格及要要滚动显示的图片。关键代码如下：

<div

id="demo"

style="

overflow:

hidden

width:

455px

height:

166px">

<table

border="0"

cellspacing="0"

cellpadding="0">

<tr>

<td

valign="top"

id="marquePic1">

<!--

要循环滚动的图片

-->

<table

width="455"

border="0"

align="center"

cellpadding="0"

cellspacing="0"

>

<tr

align="center">

<%for(int

i=1i<8i++){%>

<td>

<img

src="Images/<%=i%>.jpg"

width="118"

height="166"

border="1">

</td>

<%}%>

</tr>

</table>

</td>

<td

id="marquePic2"

width="1"></td>

</tr>

</table>

</div>

（2）编写自定义的JavaScript函数move()，用于实现无间断的图片循环滚动效果。speed数值越大图片滚动的越快，具体代码如下：

<script

language="javascript">

var

speed=30

//设置间隔时间

marquePic2.innerHTML=marquePic1.innerHTML

var

demo=document.getElementById("demo")

//获取demo对象

function

Marquee(n){

//实现图片循环滚动的方法

if(marquePic1.offsetWidth-demo.scrollLeft<=0){

demo.scrollLeft=0

}

else{

demo.scrollLeft=demo.scrollLeft+n

}

}

var

MyMar=setInterval("Marquee(5)",speed)

demo.onmouseover=function()

{

//停止滚动

clearInterval(MyMar)

}

demo.onmouseout=function()

{

//继续滚动

MyMar=setInterval("Marquee(5)",speed)

}

</script>

以上所述是小编给大家介绍的JavaScript代码实现图片循环滚动效果的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

推荐使用<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()"

===>指鼠标离开图片时,图片运动

希望对您有所帮助

素材的准备。为了更好的表现网站的风格和特色，具备一些更富表现力和吸引力的图片是必不可少的。同理，准备了一些与网页主题密切相关的图片，用于做为实现图片滚动效果的素材。

打开Dreamweaver8，新建一网页文件，并保存为名为“index.html"文件。

切换至代码编辑界面，输入如下代码：

<body><div id="photo-list"> <ul id="scroll"> 

<li><a href="#"><img src="images/1.jpg" width="100px" height="100px" alt=""/></a></li> 

<li><a href="#"><img src="images/2.jpg" width="100px" height="100px" alt=""/></a></li> 

<li><a href="#"><img src="images/3.jpg" width="100px" height="100px" alt=""/></a></li> 

<li><a href="#"><img src="images/4.jpg" width="100px" height="100px" alt=""/></a></li> 

<li><a href="#"><img src="images/5.jpg" width="100px" height="100px" alt=""/></a></li> 

<li><a href="#"><img src="images/6.jpg" width="100px" height="100px" alt=""/></a></li>   </ul></div></body>

对应效果如图所示：

新建一CSS样式表文件，并将该文件保存到与“index.html”相同的目录下，文件名称为“MyStyle.css"。

在新建的样式表文件"MyStyle.css”文件中输入如下代码：

* { padding:0margin:0}       /*设置所有对像的内边距为0*/

body { text-align:center}      /*设置页面居中对齐*/

#photo-list {

/* 6张图片的宽度（包含宽度、padding、border、图片间的留白）

计算：6*(100+2*2+1*2+9) - 9 

之所以减去9是第6张图片的右边留白 */

   width:681px

/* 图片的宽度（包含高度、padding、border）

   计算：100+2*2+1*2  */ 

    height:106px 

    margin:50px auto 

 overflow:hidden    /*溢出部份将被隐藏*/ 

    border:1px dashed #ccc 

}  

#photo-list ul { list-style:none}  

#photo-list li { float:leftpadding-right:9px}

#photo-list img { border:1px solid #dddbackground:#fffpadding:2px}

对应文件内容如图所示：

在网页文件"index.html"中添加对该样式表的引用：

<link rel="stylesheet" type="text/css" href="MyStyle.css">

此时网页效果如图所示：

新建一个JS文件，并将该文件另存为“MoveEffect.js"。

在”MoveEffect.js“文件中输入如下所示代码：

   var id = function(el) {          return document.getElementById(el)       },

       c = id('photo-list')

   if(c) {

       var ul = id('scroll'),

           lis = ul.getElementsByTagName('li'),

           itemCount = lis.length,

           width = lis[0].offsetWidth, //获得每个img容器的宽度

           marquee = function() {

               c.scrollLeft += 2

               if(c.scrollLeft % width <= 1){  //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面

                   ul.appendChild(ul.getElementsByTagName('li')[0])

                   c.scrollLeft = 0

               }

           },

           speed = 50//数值越大越慢

       ul.style.width = width*itemCount + 'px'//加载完后设置容器长度        

       var timer = setInterval(marquee, speed)

       c.onmouseover = function() {

           clearInterval(timer)

       }

       c.onmouseout = function() {

           timer = setInterval(marquee, speed)

       }

   }

然后在主页文件"index.html”中添加对该“MoveEffect.js”文件的引用。

<script type="text/javascript" src="MoveEffect.js"></script>

代码如图所示：

打开“index.html”网页文件，最终效果如果所示：