使用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 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
详解Vue单元测试case写法
May 24 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
vue动态配置模板 'component is'代码
Jul 04 Javascript
vue下的@change事件的实现
Oct 25 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 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 !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
JS与框架页的操作代码
2010/01/17 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
python实现机器人行走效果
2018/01/29 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
python脚本第一行如何写
2020/08/30 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
2014教师研修学习体会
2014/07/08 职场文书
家长学校培训材料
2014/08/20 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
Python办公自动化PPT批量转换操作
2021/09/15 Python