使用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 相关文章推荐
javascript学习笔记(五)正则表达式
Apr 08 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
深入分析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实现根据银行卡号判断银行
2015/04/29 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
python之import机制详解
2014/07/03 Python
Python中tell()方法的使用详解
2015/05/24 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
Django 路由控制的实现
2019/07/17 Python
python 类之间的参数传递方式
2019/12/20 Python
python 消费 kafka 数据教程
2019/12/21 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
HTML5新增加的功能详解
2016/09/05 HTML / CSS
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
社区国庆节活动方案
2014/02/05 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
党小组鉴定意见
2015/06/02 职场文书
Python基础之pandas数据合并
2021/04/27 Python
MySQL查询学习之基础查询操作
2021/05/08 MySQL
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
浅谈react useEffect闭包的坑
2021/06/08 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android