javascript实现图片无缝滚动左右

一个能“动”的网站浏览起来看着就美观大气。今天我就实现四张图片的无缝滚动，鼠标进入滚动停止，点击图片显示提示信息。

工具/原料

• 电脑一台

方法/步骤

1. 设置图片的样式：

    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;          }

   具体样式表如下：

   

2. 页面代码设计：

   设计文本域显示图片偏移量，<div id="Label1"></div>

   两个<a>标签控制左右移动，<a href="javascrip:;" id="l1">左</a> &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascrip:;" id="r1">右</a>

   

   

3.  

   准备工作完成，现在就来设计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;//相当于复制了一次所有图片

    

   

4.  

   让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;     };

    

   

5.  

   鼠标进入停止滚动，鼠标移开开始滚动：

    oDiv.onmouseover = function ()

   {             

     clearInterval(time1);         

     };         

     oDiv.onmouseout = function () {         

         time1 = setInterval(move, 30);      

        };

    

   

6.  

   设计移动速度speed=2，设置30毫秒移动一次

   var time1 = setInterval(move, 30);

   所有代码如下：

    

   

7. 现在就来看看效果吧，鼠标进入左边则图片左移动，鼠标进入右则图片右移动。并且显示了偏移量

   

8. 不同时间点的图片，显示效果。现在动画效果就完成了哦。有兴趣的朋友可以试着做做

   

来源：https://jingyan.baidu.com/article/b7001fe1a7e7c60e7382dd71.html