如何在HTML中实现图片的滚动效果?

如何在HTML中实现图片的滚动效果?,第1张

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

打开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”网页文件,最终效果如果所示:

网站中,有时为了更好的利用有限的页面空间展示更多的内容,也为了丰富网站页面自身的表现样式,我们往往会用到图片滚动的效果。想要实现这种效果,只需要在想要显示的表格或网页中加入以下代码即可实现:<div id=demo style="overflow:hiddenheight:100pxwidth:300px"><table align=leftcellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0056_缩小大小.JPG" /><img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0053_缩小大小.JPG" /><img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0054_缩小大小.JPG" /><img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0058_缩小大小.JPG" /><img height="200" alt="" width="150" src="/lazysite/user_space/7788/CIMG0059_缩小大小.JPG" /><img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0063_缩小大小.JPG" /><img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0070_缩小大小.JPG" /><img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0071_缩小大小.JPG" /><img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0072_缩小大小.JPG" />//这个图片的地址可以是相对的也可以是绝对的</td><td id=demo2 valign=top></td></tr></table></div><script>var speed=30demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(demo2.offsetWidth-demo.scrollLeft<=0)demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft++}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script>下面,我们就上面代码的主要部分进行分析:<div id=demo style="overflow:hiddenheight:100pxwidth:300px">这段代码中下划线的部分表示我们这段滚动图片所占用区域的大小。用户可根据页面的实际需要进行调节。但一般情况下至少要大于或等于图片的高度和宽度。<img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0056_缩小大小.JPG" />上面这段代码是图片的代码。每加入一行如上代码,那就会多出一个展示的图片。图片可以是一个,也可以是无数个。需要强调的是,每个图片的高度和宽度应尽量的统一大小,主要显示出来的效果才会更好看。var speed=30 这行代码是控制图片滚动的速度。数字越小,滚动的也就越快;相反,数字越大,滚动的也就越慢。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7409588.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-05
下一篇 2023-04-05

发表评论

登录后才能评论

评论列表(0条)

保存