javascript中如何做图片滚动

这篇"javascript中如何做图片滚动"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"javascript中如何做图片滚动"文章吧。

1.首先我们通过设置一个网页框架代码如下：

                                                                                        
                      
                         
                          
                        
                         
                     
                 
                向左滚动                 向右滚动        

这样我们就完成了一个网页的框架内容，我们也设置了一个css的外联式和JavaScript的外联式的语句。

2.设置css样式完成静态页面的设置，代码如下：

body,div,ul,li,p {        padding: 0;        margin: 0;}#div1 {        position: relative;        margin: 10px auto;        border: 1px solid black;        width: 680px;        height: 170px;        overflow: hidden;}#div1 ul {        position: absolute;        left: 0;}#div1 ul li {        float: left;        padding: 10px;        list-style: none;        width: 150px;        height: 150px;}#div1 ul li img {        width: 150px;        height: 150px;}

当我们完成这个步骤的时候就会得到一个静态的页面，那么接下来就是让页面动起来。

3.添加javascript的内容实现一个页面效果代码如下：

 _window.onload = function()  {      var oDiv = document.getElementById("div1");      var oUl = document.getElementsByTagName("ul")[0];      var oLi = document.getElementsByTagName("li");      var oA = document.getElementsByTagName("a");      var timer = null;      var iSpeed = 8;      //复制一遍ul      oUl[xss_clean] +=oUl[xss_clean];      //ul的宽度是所有li宽度之和，复制ul之后的整个ul的宽度就是li的长度乘以一个li的宽度      oUl.style.width = oLi.length*oLi[0].offsetWidth + "px";      function fnMove()      {          //图片向左移动时的条件，即在div里的ul的offsetLeft小于一个ul的宽度          if (oUl.offsetLeft<-oUl.offsetWidth/2)          {              //将整个复制的ul向右拖拽直至整个ul中的第一张图归位到起点              oUl.style.left = 0;          }          //图片向右移动时的条件，即在div里的ul的offsetLeft大于等于0          else if (oUl.offsetLeft>=0)         {              //将整个复制的ul向左拖拽直至整个ul中的第一张图归位到起点             oUl.style.left = -oUl.offsetWidth/2 + "px";          }          //给ul一个速度让整个ul的offsetLeft增加或减少，速度为正则向右移动，速度为负则向左移动          oUl.style.left = oUl.offsetLeft +iSpeed + "px";     }      //点击向左滚动即触发第一个a元素标签      oA[0].onclick = function()      {          iSpeed = -8;      }      //点击向右滚动即触发第二个a元素标签      oA[1].onclick = function()      {          iSpeed = 8;      }      //当鼠标移动到div里面的时候图片滚动暂停，此时清除定时器即可。      oDiv.onmouseover = function()      {         clearInterval(timer);     }      //当鼠标移出div的时候图片继续滚动，此时重新加载定时器。     oDiv.onmouseout = function()      {          timer=setInterval(fnMove,30);      }  }

在代码中我们通过设置函数，在页面中我们可以通过点击向那个方向滚动从而实现，滚动的一个方向（默认是向右）。而且当我们鼠标停留在滚动的图片时会停止滚动。

以上就是关于"javascript中如何做图片滚动"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。