于 万 国

(河北民族师范学院　数学与计算机系，河北　承德 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; //设置文本不换行；……