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


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 相关文章推荐
js中符号转意问题示例探讨
Aug 19 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
Javascript地址引用代码实例解析
Feb 25 Javascript
JS正则表达式验证密码强度
Mar 18 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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
php下使用curl模拟用户登陆的代码
2010/09/10 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
Array对象方法参考
2006/10/03 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
Django框架请求生命周期实现原理
2020/11/13 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
如何理解transaction事务的概念
2015/05/27 面试题
服装机修工岗位职责
2013/12/26 职场文书
商业项目策划方案
2014/06/05 职场文书
法定代表人资格证明书
2014/09/11 职场文书
冰峪沟导游词
2015/02/09 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python