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


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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
jQuery 对象中的类数组操作
Apr 27 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
React如何避免重渲染
Apr 10 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
vue开发简单上传图片功能
Jun 30 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
php 过滤危险html代码
2009/06/29 PHP
php计算十二星座的函数代码
2012/08/21 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
PHP概率计算函数汇总
2015/09/13 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
2014年健康教育工作总结
2014/11/20 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技