用HTML+CSS+JavaScript实现滚动图片的技术

于 万 国

(河北民族师范学院　数学与计算机系，河北　承德 067000)

用HTML+CSS+JavaScript实现滚动图片的技术

于 万 国

(河北民族师范学院数学与计算机系，河北承德 067000)

利用JavaScript的脚本语言实现WEB页中的滚动图片的设计．即在网页中一个固定位置循环滚动图片，当鼠标经过图片时滚动停止，当鼠标离开图片时又重新滚动的技术．

JavaScript；WEB页；图片滚动

在网页中一个固定位置，通过滚动方式显示更多信息，一是节省了网页空间，二是让网页整体效果看起来更灵活，更吸引人，很多网站通过循环滚动图片或循环滚动文字的方式展示更多的信息，如一些淘宝、新闻网站等．本文介绍如何使用JavaScript来实现这种效果．

1　实现原理分析

经过分析，可以得出实现滚动图片的主要原理如下：

1) 当所有图片的总宽度超过希望在网页中显示的宽度时，一部分隐藏，一部分显示．

2) 通过改变元素偏移量的方式，让元素沿着某个方向移动．

3) 使用JavaScript提供的函数setInterval()，让元素每隔一段时间就移动一次．

4) 所有内容移动到某个边界后，重新滚动．

5) 通过添加鼠标事件，实现鼠标经过时，停止滚动，鼠标离开后，继续滚动．

2　实现步骤

1) 搭建HTML结构，建立如下图1所示的文件目录结构

图1　图片滚动目录结构

2) 创建HTML结构，写出index.html代码，如代码清单一．这里要注意的是需要把要滚动浏览的图片通过span元素复制一份，以免滚动到最后时，出现空白．

代码清单一：

3) 设计CSS样式，写出style.css代码，如代码清单二．这里必须为包围图片的外层div(picScroll)设置如下属性：

white-space:nowrap; //设置文本不换行；

overflow:hidden; //设置溢出属性为隐藏．

代码清单二：

body{text-align:center; }

img{ width:200px; height:200px; margin-left:5px; }

#picScroll{margin:0 auto; white-space:nowrap; width:600px; height:200px; overflow:hidden;

border:1px solid #C90; }

4) 设置滚动行为，写出autochange.js．这是实现的重点，现对其分解来实现．

① 让图片向左移动一点(比如向左移动1px)

首先自定义函数changeToLeft来实现图片的向左移动．在函数changeToLeft里，使用属性scrollLeft设置元素的滚动条的水平偏移值．scrollLeft的作用是设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离，与之相对应的 scrollTop是设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离．

② 让图片每隔10毫秒就向左移动1px

使用函数setinterval()，每隔10毫秒调用一次函数changeToLeft，所有图片滚动到左侧边缘后，就停止滚动了．下面来解决这个问题．

③ 让图片循环滚动

将id为picScroll2元素里的代码设置为和picScroll1里的代码完全一致．

当最外层div(picScroll)向左偏移值大于picScroll1的宽度时，说明所有图片都已经滚动显示一次了，此时需要在函数changeToLeft里重新设置最外层div(picScroll)的左偏移值为0，否则继续向左滚动．获取picScroll1的宽度，可通过对象的offsetWidth属性得到．

④ 添加事件：鼠标经过时，图片停止滚动

为最外层div添加事件onmouseover．触发事件onmouseover时，使用函数clearInterval()，取消函数setInterval()函数的执行．

⑤ 添加事件：鼠标离开时，图片继续滚动

为最外层div添加事件onmouseout．触发事件onmoueout时，继续开始图片向左滚动的执行．最终代码如代码清单三．

代码清单三：

window.onload=function(){

5) 最终效果．实现的最终效果如图2所示．

图2　滚动图片效果图

3　总结

在该实现方法中用到了JavaScript中的BOM和DOM模型，setInterval方法，scrollLeft、offsetWidth属性的使用，以及布置页面的技巧等．通过此方法的实现，读者可思考如何实现图片的向上、向下、向右滚动．

Realization of the Technique of Scrolling Pictures by Using HTML + CSS + JavaScript

YU Wanguo
(Department of Mathematics and Computer Science, Hebei Normal University for Nationalities, Chengde, Hebei 067000, China)

Using the scripting language of JavaScript to design the rolling pictures for WEB page. This design has realized the technique of circularly rolling images at a fixed position in your web page. When the mouse touches the picture, the rolling stops; when the mouse is moved away, the rolling starts again.

JavaScript; WEB page; scroll picture

TP312

A

1673-2065(2015)04-0006-03

10.3969/j.issn.1673-2065.2015.04.003

(责任编校：李建明英文校对：李玉玲)

2015-01-22

河北民族师范学院基金项目(201309)

于万国(1976-)，男，蒙古族，河北承德人，河北民族师范学院数学与计算机系讲师，理学硕士.