无缝滚动的简单实现代码(推荐)


Posted in Javascript onJune 07, 2016

原理:

1.给ul一个绝对定位使其脱离文档流,left设置为0,把图片塞进ul里,编写一个“移动"函数,函数功能能够使ul的left以一个正速度向右跑动,

2.设置一个定时器,让"移动"函数每30(参数可变)毫秒执行一次

3.因为ul的长度会“跑”完,此时可以使ul的content也就是img增加一倍,

oUl.innerHTML +=oUl.innerHTML;

4.此时因为ul的content增加,其width也会随着增大,根据实际项目展示图片数量可能改动或不确定性,

oUl.style.width = oLi.length*oLi[0].offsetWidth+'px';

5.往“移动”函数里增添代码。

5.1此时ul向右移动,判断当ul的offsetLeft>0时,把ul向左拉“一半ul的宽度”,也就是使ul能够向右一直无限制移动

if(oUl.offsetLeft>0){
     oUl.style.left = -oUl.offsetWidth/2+'px';
}

5.2当ul向左移动,其offsetLeft跑了ul一半的宽度时,把整个ul拉回至初始的left:0;

if (oUl.offsetLeft<-oUl.offsetWidth/2) {
      oUl.style.left = 0; 
}

上代码:

html:

<div id="box">
    <ul>
      <li><a href="#"><img src="1.jpg" /></a></li>
      <li><a href="#"><img src="2.jpg" /></a></li>
      <li><a href="#"><img src="3.jpg" /></a></li>
      <li><a href="#"><img src="4.jpg" /></a></li>
    </ul>
 </div>

css:

* {margin: 0;padding: 0;}
   #box{ width: 480px; height: 110px; border: 1px red solid; margin: 100px auto;overflow: hidden; position: relative; }
   #box ul{ position: absolute; left: 0; top: 5px;}
   #box ul li{list-style: none; float: left; width: 100px; height: 100px; padding-left: 16px; }
   #box ul li img{width: 100px; height: 100px;}

js:

<script>
         window.onload = function(){
             var oDiv = document.getElementById('div1');
             var oUl = oDiv.getElementsByTagName('ul')[0];
             var oLi = oUl.getElementsByTagName('li');
             var aA = document.getElementsByTagName('a');
             var iSpeed = 10;      //让ul开始就具有一个速度走动  
             
              oUl.innerHTML +=oUl.innerHTML;  
              oUl.style.width = oLi.length*oLi[0].offsetWidth+'px';  
                aA[0].onclick = function(){
                      iSpeed = -10;
               };
                aA[1].onclick = function(){
                      iSpeed = 10;
               };

               function fnMove(){
                   if (oUl.offsetLeft<-oUl.offsetWidth/2) {   //负数是因为ul的left是负数  
                     

oUl.style.left = 0;
                       }

                   else if(oUl.offsetLeft>0){
                         oUl.style.left = -oUl.offsetWidth/2+'px';     
                      }                
                    
                     oUl.style.left = oUl.offsetLeft+iSpeed+'px';    //整个ul向右移动      
                  
               };

                 var timer = null;             
                 clearInterval(timer);
                 timer = setInterval(fnMove,30);

                 oUl.onmouseover = function(){
                    clearInterval(timer);
                 };
                 oUl.onmouseout = function(){
                    timer = setInterval(fnMove,30); //当鼠标移开的时候执行这个定时器

                 };
            
         };
      </script>

如有错误,欢迎指正。

以上这篇无缝滚动的简单实现代码(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
js module大战
Apr 19 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
原生js实现购物车
Sep 23 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 #Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 #Javascript
JQuery异步加载PartialView的方法
Jun 07 #Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 #Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 #Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 #Javascript
PassWord输入框代码分享
Jun 07 #Javascript
You might like
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python生成随机验证码的两种方法
2015/12/22 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
python针对excel的操作技巧
2018/03/13 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
Python单元测试与测试用例简析
2019/11/09 Python
pytorch 常用线性函数详解
2020/01/15 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
团日活动总结怎么写
2014/06/25 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
小学优秀教师材料
2014/12/15 职场文书
三潭印月的导游词
2015/02/12 职场文书