使用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 相关文章推荐
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
JS数组去重的6种方法完整实例
Dec 08 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 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中数组的三种排序方法分享
2012/05/07 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
python实现挑选出来100以内的质数
2015/03/24 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
python利用微信公众号实现报警功能
2018/06/10 Python
实例讲解Python爬取网页数据
2018/07/08 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
python面试题小结附答案实例代码
2019/04/11 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
python实现井字棋小游戏
2020/03/04 Python
Python中logger日志模块详解
2020/08/04 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
技术总监个人的自我评价范文
2013/12/18 职场文书
大学总结自我鉴定
2014/01/18 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
杭白菊导游词
2015/02/10 职场文书