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

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

<html><head><metacharset="utf-8"/><title>javascript怎么做图片滚动</title></head><linkrel="stylesheet"href="css/gundong.css"/><scripttype="text/javascript"src="js/gundong.js"></script><body><divid="div1"><ul><li><imgsrc="img/GIF-1.png"></li><li><imgsrc="img/gif-2.png"></li><li><imgsrc="img/gif-3.png"></li><li><imgsrc="img/gif-4.png"></li></ul></div><ahref="javascript:;">向左滚动</a><ahref="javascript:;">向右滚动</a></body></html>

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

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

body,div,ul,li,p{padding:0;margin:0;}#div1{position:relative;margin:10pxauto;border:1pxsolidblack;width:680px;height:170px;overflow:hidden;}#div1ul{position:absolute;left:0;}#div1ulli{float:left;padding:10px;list-style:none;width:150px;height:150px;}#div1ulliimg{width:150px;height:150px;}

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

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

window.onload=function(){varoDiv=document.getElementById("div1");varoUl=document.getElementsByTagName("ul")[0];varoLi=document.getElementsByTagName("li");varoA=document.getElementsByTagName("a");vartimer=null;variSpeed=8;//复制一遍uloUl.innerHTML+=oUl.innerHTML;//ul的宽度是所有li宽度之和，复制ul之后的整个ul的宽度就是li的长度乘以一个li的宽度oUl.style.width=oLi.length*oLi[0].offsetWidth+"px";functionfnMove(){//图片向左移动时的条件，即在div里的ul的offsetLeft小于一个ul的宽度if(oUl.offsetLeft<-oUl.offsetWidth/2){//将整个复制的ul向右拖拽直至整个ul中的第一张图归位到起点oUl.style.left=0;}//图片向右移动时的条件，即在div里的ul的offsetLeft大于等于0elseif(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中如何做图片滚动”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。