一个能“动”的网站浏览起来看着就美观大气。今天我就实现四张图片的无缝滚动，鼠标进入滚动停止，点击图片显示提示信息。
工具/原料
-
电脑一台
方法/步骤
-
设置图片的样式：
img
{
height: 100px;
width: 100px;
}
设置图片显示区域div1：
#div1 {
height: 100px;
width: 400px;
background-color: red;
position: relative;
top: 50px;
left: 0px;
margin: 0 auto;
overflow: hidden;
/*// width:500px;*/ }
用ul标签组织图片：
#div1 ul {
position: absolute;
left: 0px;
top: 0px; }
#div1 ul li {
height: 100px;
width: 100px;
list-style: none;
float: left; }
具体样式表如下：
-
页面代码设计：
设计文本域显示图片偏移量，<div id="Label1"></div>
两个<a>标签控制左右移动，<a href="javascrip:;" id="l1">左</a> <a href="javascrip:;" id="r1">右</a>
-
准备工作完成，现在就来设计JavaScript：
创建对象，
var oDiv = document.getElementById("div1") ；
var oUl = oDiv.getElementsByTagName("ul")[0]；
var lb1 = document.getElementById("Label1")；
var oLi = oUl.getElementsByTagName("li");
定义两个图片区域（如果注释掉下面的代码效果图如下）
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;//相当于复制了一次所有图片
-
让ul移动函数：
function move() {
if (oUl.offsetLeft < -oUl.offsetWidth / 2)
oUl.style.left = "0px";
if (oUl.offsetLeft > 0)
oUl.style.left = -oUl.offsetWidth / 2 + "px";
oUl.style.left = oUl.offsetLeft + speed + "px";
lb1.innerText = oUl.offsetLeft; };
-
鼠标进入停止滚动，鼠标移开开始滚动：
oDiv.onmouseover = function ()
{
clearInterval(time1);
};
oDiv.onmouseout = function () {
time1 = setInterval(move, 30);
};
-
设计移动速度speed=2，设置30毫秒移动一次
var time1 = setInterval(move, 30);
所有代码如下：
-
现在就来看看效果吧，鼠标进入左边则图片左移动，鼠标进入右则图片右移动。并且显示了偏移量
-
不同时间点的图片，显示效果。现在动画效果就完成了哦。有兴趣的朋友可以试着做做
来源：https://jingyan.baidu.com/article/b7001fe1a7e7c60e7382dd71.html