无缝滚动--基本实现

工作一年多了，终于是从c++转java 了，虽然能够完成平时的工作，但是总是感觉自己的js基础知识不太扎实，很多地方都是拿来就用，虽然实现了想要的

效果，但是其实都不知道为什么，我想总是用拿来主义，这样肯定不能提高自己，加上近来工作不是很忙，就想开始好好的学习掌握一下js基础，这篇博文就是昨天学习的成果，现在总结一下，也希望科以帮到正在探索js的童鞋。

在实现无缝滚动之前，我们先举一个简单的例子，先来实现让一个div运动

1、body部分

      <button  id="Btn1">向右移动</button><button  id="Btn2">停止移动</button><!-- 要想让一个div运动必须添加：position:absolute --><div id="div1"></div>

2、样式

 #div1{width:200px;height:80px;background:#ccc;margin-top:10px;position:absolute;left:0px;}

3、js部分

<script type="text/javascript">window.οnlοad=function(){var oDiv1 = document.getElementById("div1");var oBtn = document.getElementById("Btn1");var oBtn2 = document.getElementById("Btn2");var timer = null;//向右移动oBtn.onclick = function(){//打开定时器timer = setInterval(function(){//要让div向右移动就需要改变div的left的值，//有人可能想用用到 oDiv1.style.left = oDiv1.style.left + 移动长度  ,但是是不可行的//因为我们拆开来看就是：oDiv1.style.left ="0px" + 10  => '0px10',这个电脑肯定不能识别//所以我们需要用到 ：offsetLeft  这个是一个具体的数值  oDiv1.offsetLeft就表示当前位置oDiv1.style.left = oDiv1.offsetLeft + 2 +"px";},30);}//停止移动oBtn2.onclick = function(){//关闭定时器clearTimeout(timer);}}</script>

按照上面的例子，我们可以让一个div向右移动，我们主要需要掌握的我在上面的js中都通过注释的方式写出来了，一个是：offsetLeft的作用，
一个是：定时器让物体连续移动，上面介绍的东西虽然看起来很简单，很低俗，但是掌握了上面用到的知识，足够让我们来实现一个无缝滚动了，

好了，接下来我们切入正题，实现无缝滚动。

一、html代码如下：

 <div class="roll" id="roll"><a href="javascript:void(0);" class = "btn_left" ></a><a href="javascript:void(0);" class = "btn_right" ></a><div class="marquee"> <ul><li><a href="#"><img src="01.jpg"/><em>jquery 特效</em></a></li><li><a href="#"><img src="02.jpg"/><em>滚动代码</em></a></li><li><a href="#"><img src="03.jpg"/><em>导航菜单</em></a></li><li><a href="#"><img src="04.jpg"/><em>兼职网站大全</em></a></li>     </ul></div> </div>

二、css样式如下：

<style>
.roll { width: 780px; height: 108px; margin: 50px auto 0; position: relative; }
.btn_left { display: block; width: 100px; height: 100px;
background: url(5.png) ;position: absolute; top: 20px; left: 1px; z-index: 1; }  .btn_right { display: block; width: 120px; height: 120px;
background: url(6.png);position: absolute; top: 20px; right: 0; z-index: 1; }  a{ font-size:13px; color:#333333; text-decoration:none;}
a:hover{color:red; text-decoration:underline;}
img{ border:none;}.roll .marquee {width:600px;height:260px;overflow:hidden;
-border:1px solid #333;left:110px; margin-top:20px;position:relative;}
.marquee ul{ position : absolute;left:0px;}
.marquee li{ display:inline; float:left; -margin-right:12px;}
.marquee li a{ width:200px; height:250px; display:block; float:left; text-align:center; font-size:14px;}
.marquee li a:hove{ text-decoration:none;}
.marquee li img {width:140px; height:140px;}
.marquee li em{font-style: normal; height:24px; line-height:24px; display:block; margin-top:8px;}
.marquee button{position:absolute; top:50%; height:24px;} </style>

第三步：js实现部分

31.通过上面的小例子，我们首先可以让图片动起来

window.οnlοad=function(){//1、获取最外层的div var oDiv = document.getElementById("roll");//2、通过div获取它下面唯一的一个 ulvar oUl = oDiv.getElementsByTagName("ul")[0];//3、开启一个定时器:让ul的left值不断变小，向左运动 setInterval(function(){oUl.style.left = oUl.offsetLeft - 5 +'px';},300); }

上面三步，运行起来就实现了左移动，但是现在有一个布局上的问题：效果图如下

为了帮助大家看的清楚，我们将
.marquee 的css样式：加上边框border:1px solid #333;去掉overflow:hidden;

可以发现图片折行了，因为ul没有宽度，所以最后一张图片就会被相对比较窄的div（就是有黑色边框的）挤下去了，

所以我们要让ul有一个足够大的宽度，那么ul要设置为多少比较合理呢？

其实一般来说ul的宽度就是每个li的宽度的总和，而每个li的宽度都是相同的

所以ul的宽度就是： li的个数* 每个li的宽度，等价于 oLi[0].offsetWidth * oLi.length 设置了ul的宽度，那四个li就拥有了足够的宽度，

就能在一行显示，好了我们在上面代码的基础上，设置一下ul的宽度，修改代码如下：

 window.οnlοad=function(){//1、获取最外层的div var oDiv = document.getElementById("roll");//2、通过div获取它下面唯一的一个 ulvar oUl = oDiv.getElementsByTagName("ul")[0];//3、设置ul的宽度//3.1  获取 ul下所有的livar oLi = document.getElementsByTagName("li");//3.2  通过js动态设置ul的宽度oUl.style.width = oLi[0].offsetWidth * oLi.length+"px";//4、开启一个定时器:让ul的left值不断变小，向左运动 ，这是所有图片都在一行上面setInterval(function(){oUl.style.left = oUl.offsetLeft - 5 +'px';},300);}

在运行效果图如下：

这时我们发现图片就在一行上面了，达到了我们想要的效果，可是现在图片移动一直在向左运动之后，出现了空白的部分，这就是没有实现无缝，

那怎么办呢，不用着急，一般来说遇到这个问题我们的解决办法是：

首先：将lu下面的每个li复制一份，这个我们可以用 innerHTML来实现

oUl.innerHTML = oUl.innerHTML + oUl.innerHTML 但是复制了之后，还是会出现空白

然后：我们还需要在ul的左边距小于ul宽度一般的时候，将ul的left值变为opx，为什么要这样做，我们下面详细说一说

为了帮助大家理解，我画了下面的模拟效果图

给大家介绍一下：
这个图里面的编号为1、2、3、4的四个矩形框就代表着正在向左移动的四张图片，有两份相同编号的是因为后面的一份是前面的复制出来的，
实际上用户所能看见的就只有上面黑色实线框那么宽，1、2、3、4一直在向左移动，知道移动到现在效果图显示的位置，我们发现最开始用户看见的是1、2、3
现在图上用户又要看见1、2、3了，这个时候整个东西在用户眼里又回到了最开始看见的相同的状态，我在这个时候用一个障眼法，把前面的1、2、3、4
一瞬间在拉回去，就这样重复，实际上用户是看不出来你把它往回拉的，我们什么时候往会拉呢？其实看图就能发现，如果假设八张图片的宽度是8，
当图片滚到一半的时候，就是第四张图片正好在div外面的时候，我们就可以把它拉回来，实际上我们就可以理解为：
在js中检测当ul的左边距小于ul宽度一半的时候拉回来，
那怎么实现往回拉的效果呢，这个就简单了，直接将ul的left值重新设置为0p就可以了噢，好啦，不知道大家听懂了没有，如果没懂就自己动手画画图，好
好想一想li的运动过程，理解了上面这些，我们就继续修改js吧

window.οnlοad=function(){//1、获取最外层的div var oDiv = document.getElementById("roll");//2、通过div获取它下面唯一的一个 ulvar oUl = oDiv.getElementsByTagName("ul")[0];//3、 实现复制一份lu下面的lioUl.innerHTML += oUl.innerHTML;//4、设置ul的宽度//4.1  获取 ul下所有的livar oLi = document.getElementsByTagName("li");//4.2  通过js动态设置ul的宽度oUl.style.width = oLi[0].offsetWidth * oLi.length+"px";//5、开启一个定时器:让ul的left值不断变小，向左运动 ，这是所有图片都在一行上面setInterval(function(){oUl.style.left = oUl.offsetLeft - 5 +'px';//6、检测往回拉的时间，因为是在向左移动所以 oUl.offsetLeft为负数if(oUl.offsetLeft < -oUl.offsetWidth/2){//7、当ul的左边距小于 ul宽度的一半的时候，就拉回来oUl.style.left = "0px";}},300);

至此：基本实现了无缝滚动，效果图如下：

接下来我们在来实现无缝滚动的两个扩张功能：

1、图上还有两个按钮，我们需要实现按钮来控制图片移动的方向

oUl.style.left = oUl.offsetLeft +speed+'px';这句代码表示我们每次给ul的left加上去了一个speed（速度），

如果speed是个负数，那么ul的left的值越来越小，这时候图片是在向左移动

如果speed是个正数，那么当ul的left的值越来越大，这时图片实在向右运动

那么要实现这个功能就很简单了，只用定义一个speed表示图片移动的速度，

当向左运动的时候speed变成一个负数

当向右运动的时候speed变成一个正数就可以了

代码如下：

<script type="text/javascript">window.οnlοad=function(){//1、获取最外层的div var oDiv = document.getElementById("roll");//2、通过div获取它下面唯一的一个 ulvar oUl = oDiv.getElementsByTagName("ul")[0];//3、获取左箭头var oBtn1=oDiv.getElementsByTagName('a')[0];  //4、获取右箭头var oBtn2=oDiv.getElementsByTagName('a')[1]; //5、定义移动速度var speed = -5;//6、 实现复制一份lu下面的lioUl.innerHTML += oUl.innerHTML;//7、设置ul的宽度//7.1  获取 ul下所有的livar oLi = document.getElementsByTagName("li");//7.2  通过js动态设置ul的宽度oUl.style.width = oLi[0].offsetWidth * oLi.length+"px";//8、开启一个定时器:让ul的left值不断变小，向左运动 ，这是所有图片都在一行上面setInterval(function(){oUl.style.left = oUl.offsetLeft + speed +'px';//6、检测往回拉的时间，因为是在向左移动所以 oUl.offsetLeft为负数if(oUl.offsetLeft < -oUl.offsetWidth/2){//7、当ul的左边距小于 ul宽度的一半的时候，就拉回来oUl.style.left = "0px";}//11、当向右运动的时候，右变出现空白，检测当ul的left的值大于0的时候拉回if(oUl.offsetLeft > 0){//7、设置拉回的长度：拉回到自身宽度的一半oUl.style.left = -oUl.offsetWidth/2;}},300);//9、给向左移动添加鼠标移入的事件，修改速度为正数，向左走oBtn1.onmouseover = function(){speed = -5;}//10、给向左移动添加鼠标移入的事件，修改速度为正数，向左走oBtn2.onmouseover = function(){speed = 5;}}

至此我们做完了这个扩展功能，总结一下总共做了两件事：

1、修改移动速度：speed 因为speed为正或者为负直接决定了图片向左滚动还是向右滚动

2、修改判断条件，因为之前我们考虑了往左走走到一半的时候把它拉回来，而现在我们要多考虑一个向又走的情况

第二个扩展：鼠标移入暂停功能

一般的无缝滚动都有一个特点：当鼠标移入到图片的额时候会暂停，鼠标移出的时候继续滚动

这个就很简单了，只需要在：

鼠标移入的时候关闭定时器

鼠标移出的时候重新开启定时器

最后完整js代码如下：

 window.οnlοad=function(){//1、获取最外层的div var oDiv = document.getElementById("roll");//2、通过div获取它下面唯一的一个 ulvar oUl = oDiv.getElementsByTagName("ul")[0];//3、获取左箭头var oBtn1=oDiv.getElementsByTagName('a')[0];  //4、获取右箭头var oBtn2=oDiv.getElementsByTagName('a')[1]; //5、定义移动速度var speed = -5;//11、定义定时器变量var timer = null;//6、 实现复制一份lu下面的lioUl.innerHTML += oUl.innerHTML;//7、设置ul的宽度//7.1  获取 ul下所有的livar oLi = document.getElementsByTagName("li");//7.2  通过js动态设置ul的宽度oUl.style.width = oLi[0].offsetWidth * oLi.length+"px";//8、开启一个定时器:让ul的left值不断变小，向左运动 ，这是所有图片都在一行上面timer = setInterval(function(){oUl.style.left = oUl.offsetLeft + speed +'px';//6、检测往回拉的时间，因为是在向左移动所以 oUl.offsetLeft为负数if(oUl.offsetLeft < -oUl.offsetWidth/2){//7、当ul的左边距小于 ul宽度的一半的时候，就拉回来oUl.style.left = "0px";}if(oUl.offsetLeft > 0){//7、当ul的左边距小于 ul宽度的一半的时候，就拉回来oUl.style.left = -oUl.offsetWidth/2;}},200);//9、给向左移动添加鼠标移入的事件，修改速度为正数，向左走oBtn1.onmouseover = function(){speed = -5;}//10、给向左移动添加鼠标移入的事件，修改速度为正数，向左走oBtn2.onmouseover = function(){speed = 5;}//12、  鼠标移入的时候关闭定时器oUl.onmouseover =function(){clearInterval(timer);  }//13、 鼠标移出的时候重新开启定时器oUl.onmouseout =function(){timer = setInterval(function(){oUl.style.left = oUl.offsetLeft + speed +'px';//6、检测往回拉的时间，因为是在向左移动所以 oUl.offsetLeft为负数if(oUl.offsetLeft < -oUl.offsetWidth/2){//7、当ul的左边距小于 ul宽度的一半的时候，就拉回来oUl.style.left = "0px";}if(oUl.offsetLeft > 0){//7、当ul的左边距小于 ul宽度的一半的时候，就拉回来oUl.style.left = -oUl.offsetWidth/2;}},200);}}

无缝滚动--基本实现相关推荐

vue 文字上下循环滚动_基于 Vue 无缝滚动组件Vue-Seamless-Scroll
今天给小伙伴们推荐一款超棒的Vue无缝滚动组件VueSeamlessScroll. vue-seamless-scroll 基于 vue.js 构建的简单实用的无缝滚动组件.满足丰富的配置需求,支持上 ...
JQuery控制图片无缝滚动
经常有人问怎么在HTML上制作图片的无缝滚动,我自己在一些项目中也会经常用到的,今天花了些时间,上网搜索了一下,下了些源码回来看了一下,发现都是只能在IE下能够滚动的,而且都是光<html> ...
vue无缝滚动的插件开发填坑分享
写插件的初衷 1.项目经常需要无缝滚动效果,当时写jq的时候用用msClass这个老插件,相对不上很好用. 2.后来转向vue在vue-awesome没有找到好的无缝滚动插件,除了配置swiper可以 ...
解决DataList控件无缝滚动图片(转)
解决问题:1.无缝滚动:2.页面初始时图片显示页面上,而不是才从一个方向出来. 将绑定数据绑定到DataList 控件后.其他数据控件也可使用此方法. 页面源代码: <div id=&quo ...
js php滚动图代码,JavaScript_JS实现的N多简单无缝滚动代码(包含图文效果)，本文实例讲述了JS实现的N多简 - phpStudy...
JS实现的N多简单无缝滚动代码(包含图文效果) 本文实例讲述了JS实现的N多简单无缝滚动代码.分享给大家供大家参考,具体如下: 实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次. ...
JavaScript之图片的无缝滚动
图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的 ...
利用scrollTop 制作图片无缝滚动
<!doctype html> <title>javascript无缝滚动 by 司徒正美</title> <meta charset="utf-8 ...
html图片墙无限滚动,尝试用CSS3实现无限循环的无缝滚动
有时候在页面的某个模块中,需要无限循环的滚动一些消息.那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)?克隆A一份完全一样的数据B放在原数据A的后面: 使用setInt ...
js笔记（10）之无缝滚动
无缝滚动<!DOCTYPE html> <html> <head><meta charset="utf-8"><title&g ...
JQuery的无缝滚动
图片无缝向左滚动的代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

无缝滚动--基本实现

无缝滚动--基本实现相关推荐

最新文章

热门文章