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 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
原生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 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
程序员编程十条戒律
2009/07/09 PHP
PHP的博客ping服务代码
2012/02/04 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python字符串替换示例
2014/04/24 Python
Python对象转JSON字符串的方法
2016/04/27 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
django 中QuerySet特性功能详解
2019/07/25 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
教师应聘自荐信范文
2014/03/14 职场文书
工作推荐信范文
2014/05/10 职场文书
班级体育活动总结
2014/07/05 职场文书
学校联谊协议书
2014/09/16 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
张丽莉观后感
2015/06/16 职场文书
画展观后感
2015/06/17 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL