使用Javascript简单实现图片无缝滚动


Posted in Javascript onDecember 05, 2014

js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单。

主要的是使用js位置知识。

1.innerHTML:设置或获取元素的html标签

2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距

3.offsetWidth:设置或获取指定标签的宽度

4.setInterval():设置方法定时启动

5.clearInterval();清除定时器

效果图:

使用Javascript简单实现图片无缝滚动

先睹为快:demo

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript scroll制作</title>

</head>

<body>

<style>

    /*conment*/

    *{

    margin: 0;

    padding: 0;

  }

  img{max-width: 100%;}

  .container{

    max-width: 620px;

    margin: 0 auto;

    padding-top: 50px;

  }

  .text-center{text-align: center;}

  .list-inline li{

    display: inline-block;

  }

  .hide{display: none;}

  hr{

    margin:20px 0; 

  }

  .tag{

    background-color: #ccc;

    padding: 5px 0;

  }

  .tag li{

    padding: 0 10px;

    border-left: 1px solid #fff;

    cursor:pointer;

  }

  .tag li:first-child{

    border-left: transparent;

  }

  .tag li.active{

    background-color: #ddd;

  }

  .scroll{

    position: relative;

    padding: 10px;

    margin-bottom: 20px;

    background-color: #ddd;

  }

  .wrap{

    overflow: hidden; 

  }

  .content{

    min-width: 3000px;

    height: 200px;

  }

  .content ul{

    float: left;

  }

  .content ul li{

    display: inline-block;

    max-width: 200px;

  }

  #prev,#next{

    width: 50px;

    height: 50px; 

    margin-top: -25px;  

    background-color: #ccc; 

    line-height: 50px; 

    text-align: center;

    cursor: pointer;  

  }

  #prev{

    position: absolute;

    left: 0;

    top:50%;

    border-radius: 0 25px 25px 0;

  }

  #next{

    position: absolute;

    right: 0;

    top:50%; 

    border-radius: 25px 0 0 25px;

  }

</style>

    <div class="container">

        <h1 class="text-center">图片滚动制作</h1>

        <hr>

    <div class="scroll">

      <div class="wrap" id="wrap">

        <div id="content" class="content" >

          <ul id="list1">

            <li> <img src="freelance.gif" alt=""> </li>

            <li> <img src="button.gif" alt=""></li>

            <li> <img src="load.gif" alt=""></li>

            <li> <img src="straw.gif" alt=""></li>      

          </ul>

          <ul id="list2">

          </ul>

        </div>

      </div>

      <div id="prev">

        prev

      </div> 

      <div id="next">

        next

      </div>     

    </div> 

    </div>

<script>

  var wrap=document.getElementById('wrap');

  var list1=document.getElementById('list1');

  var list2=document.getElementById('list2');

  var prev=document.getElementById('prev');

  var next=document.getElementById('next');

  //创建复制一份内容列表

  list2.innerHTML=list1.innerHTML;

  //向左循环滚动

  function scroll(){

    if(wrap.scrollLeft>=list2.offsetWidth){

      wrap.scrollLeft=0;

    }

    else{

      wrap.scrollLeft++;

    }

  }

    timer = setInterval(scroll,1);

  //鼠标停留使用clearInterval()

  wrap.onmouseover=function(){

    clearInterval(timer);

  }

  wrap.onmouseout=function(){

    timer = setInterval(scroll,1);

  }

  //向左加速

  function scroll_l(){

    if(wrap.scrollLeft>=list2.offsetWidth){

      wrap.scrollLeft=0;

    }

    else{

      wrap.scrollLeft++;

    }

  }

  //向右滚动

  function scroll_r(){

    if(wrap.scrollLeft<=0){

      wrap.scrollLeft+=list2.offsetWidth;

    }

    else{

      wrap.scrollLeft--;

    }

  }   

  prev.onclick=function(){

    clearInterval(timer);

    change(0)

  }

  next.onclick=function(){

    clearInterval(timer);

    change(1)

  }

  function change(r){

    if(r==0){

      timer = setInterval(scroll_l,60);

      wrap.onmouseout = function(){

        timer = setInterval(scroll_l,60);

      }

    }

    if(r==1){

      timer = setInterval(scroll_r,60);

      wrap.onmouseout = function(){

        timer = setInterval(scroll_r,60);

      }

    } 

  } 

</script>  

</body>

很简洁实用的代码,小伙伴们根据自己的项目需求,适当美化下即可。

Javascript 相关文章推荐
jquery中eq和get的区别与使用方法
Apr 14 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
深入分析js的冒泡事件
Dec 05 #Javascript
Javascript解析URL方法详解
Dec 05 #Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 #Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 #Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 #Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 #Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 #Javascript
You might like
php基于Snoopy解析网页html的方法
2015/07/09 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
jquery tools系列 expose 学习
2009/09/06 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
Python是编译运行的验证方法
2015/01/30 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
会计与出纳自荐书范文
2014/03/16 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书