js实现可控制左右方向的无缝滚动效果


Posted in Javascript onMay 29, 2016

本文实例为大家分享了无缝滚动效果JavaScript代码实现,供大家参考,具体内容如下】

效果图:

js实现可控制左右方向的无缝滚动效果

实现代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="gb2312" />
    <title>zzzz</title>
    <style>
      *{
        margin: 0;
        padding:0;
      }
      body{
        width: 1000px;
        margin: 100px auto;
        background-color: #fff;
      }
      #wrapper{
        overflow: hidden;
        width: 600px;
        height: 100px;
        position: relative;
         
      }
      #wrapper ul {
        position: absolute;
        left: 0;
        top: 0;
      }
      #wrapper li{
        float: left;
        list-style: none;
      }
      #wrapper li img{
        width: 150px;
        height: 100px;
        border-radius: 9px;
      }
      input[type=button]{
        margin-top: 20px;
        width: 35px; 
        height: 25px;
        line-height: 25px;
      }
    </style>
    <script type="text/javascript">
      window.onload=function(){
        var timer=null;
        var speed=4;
        var od=document.getElementById("wrapper");
        var au=od.getElementsByTagName('ul')[0];
        var ali=au.getElementsByTagName('li');
        au.innerHTML=au.innerHTML+au.innerHTML;
        au.style.width=ali[0].offsetWidth*ali.length+'px';
        timer=setInterval(move,30)
        function move(){
          if(au.offsetLeft<-au.offsetWidth/2){
            au.style.left='0';
          }
          if(au.offsetLeft>0){
            au.style.left=-au.offsetWidth/2+'px';
          }
          au.style.left=au.offsetLeft+speed+'px';
        }
        od.onmouseover=function(){
          clearInterval(timer);
        }
        od.onmouseout=function(){
          timer=setInterval(move,30)
        }
        document.getElementById("btn1").onclick=function(){
          speed=-4;
        }
        document.getElementById("btn2").onclick=function(){
          speed=4;
        }
      }
    </script>
  </head>
  <body>
    <div id="wrapper">
      <ul>
        <li><img src="img/pic4.jpg"/></li>
        <li><img src="img/pic3.jpg"/></li>
        <li><img src="img/pic2.jpg"/></li>
        <li><img src="img/pic1.jpg"/></li>
      </ul>
    </div>
    <input type="button" name="" id="btn1" value="向左" />
    <input type="button" id="btn2" value="向右"/>
  </body>
</html>

大家可以参考以下专题进行学习:

以上就是本文的全部内容,希望对大家学习JavaScript程序设计有所帮助。

Javascript 相关文章推荐
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
Vue实现根据hash高亮选项卡
May 27 Javascript
node使用request请求的方法
Dec 20 Javascript
JS闭包原理及其使用场景解析
Dec 03 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
原生JavaScript编写canvas版的连连看游戏
May 29 #Javascript
js省市县三级联动效果实例
Apr 15 #Javascript
js实现精确到秒的倒计时效果
May 29 #Javascript
解读Bootstrap v4 sass设计
May 29 #Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 #Javascript
深入理解js数组的sort排序
May 28 #Javascript
深入理解js函数的作用域与this指向
May 28 #Javascript
You might like
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
ECMAScript 基础知识
2007/06/29 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
layui实现数据分页功能
2019/07/27 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
python从入门到精通(DAY 2)
2015/12/20 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
详解Python中的type和object
2018/08/15 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
行政专员岗位职责
2014/01/02 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记