js实现无缝滚动图(可控制当前滚动的方向)


Posted in Javascript onFebruary 22, 2017

这个版本可以控制左右滚动,鼠标点击对应的广告会自动滑动把广告完全展示出来。还实现了记录当前滚动的方向,当鼠标离开,接着继续滚动!!!

效果图:

js实现无缝滚动图(可控制当前滚动的方向)

代码如下:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <style type = "text/css">
 *{margin: 0; padding: 0;}
  li { list-style: none; }
  .box {
  width: 800px;
  height: 450px;
  margin: 50px auto;
  overflow: hidden; 
  position: relative;
  }
  .box span {
  width: 40px;
  height: 60px;  
  display: block;
  position: absolute;
  top: 225px;
  margin-top: -20px;
  cursor: pointer;
  z-index: 1;
  }
  .box #left {
 background: url('http://cdn.attach.qdfuns.com/notes/pics/201701/14/042311cbd7gbjd7sggkd2b.png') no-repeat;
 left: 0;
    display: none;
  }
  .box #right {
  background: url('http://cdn.attach.qdfuns.com/notes/pics/201701/14/042241w8z4hx4m4pjhyjzs.png') no-repeat;
  right: 0;
   display: none;
  }
  #ad {
  width: 4000px;
  height: 450px;
  position: absolute;
  }
  #ad li {
 float: left;
  }
 </style>
 <script type = "text/javascript">
  window.onload = function(){
  var ad = document.getElementById("ad");
  var lef = document.getElementById("left");
  var rig = document.getElementById("right");
  var timer = null; //管理定时器
 var aspect = true;
  function animate(obj,speed){
   //关闭上一个定时器
   clearInterval(obj.timer);
   //管理定时器
 obj.timer = setInterval(autoAd,30);
   function autoAd(){
   //判断左走或者右走
   if(speed > 0){
    aspect = true;
    if(obj.offsetLeft >= 0){
    obj.style.left = -3200 + 'px';
    }
 }else {
    aspect = false;
    if(obj.offsetLeft <= -3200){
    obj.style.left = 0;
    }
 }
   //匀速动画: 盒子当前的位置 + 步长
   obj.style.left = obj.offsetLeft + speed +"px";
   }
 }
 animate(ad,-5);
 //鼠标划入显示控制按钮并关闭
  ad.parentNode.onmouseover = function(){
   clearInterval(ad.timer);
 lef.style.display = "block";
   rig.style.display = "block";
 };
  //鼠标离开隐藏控制按钮并启动定时器
  ad.parentNode.onmouseout = function(){
   clearInterval(ad.timer);
   clearInterval(timer);
   lef.style.display = "none";
   rig.style.display = "none";
 if(aspect){
 animate(ad,5);
 }else{
 animate(ad,-5);
 }
  };
  ad.onclick = function(event){
   //关闭自动轮播定时器
   clearInterval(ad.timer);
   clearInterval(timer);
   var event = event || window.event;
 if(event.target){
   var target = - parseInt(event.target.alt) * 800;
 }else{
   var target = - parseInt(event.srcElement.alt) * 800;
 }
   timer = setInterval(function(){
   var step = (target - ad.offsetLeft) / 10;
   step = step > 0 ? Math.ceil(step):Math.floor(step);
   ad.style.left = ad.offsetLeft + step + "px";
   if(ad.offsetLeft%800 == 0){
    clearInterval(timer);
 }
 },20)
 }
  //右移动
  lef.onclick = function(){
   clearInterval(timer);
   animate(ad,5);
  };
  //左移动
  rig.onclick = function(){
   clearInterval(timer);
 animate(ad,-5);
 };
  }
 </script>
 </head>
 <body>
 <div class="box"> 
 <ul id="ad">
 <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153lscsitwp7sszb6zs.jpg" alt="0"></li>
 <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042152pfbkbfe8vbtvulfu.jpg" alt="1"></li>
 <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153u3jgn0ds43ndd3dz.jpg" alt="2"></li>
 <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042152juuohne22z60hbsb.jpg" alt="3"></li>
 <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153lscsitwp7sszb6zs.jpg" alt="4"></li>
 </ul>
 <span id="left"></span>
 <span id="right"></span>
 </div>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
JavaScript 学习笔记(五)
Dec 31 Javascript
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
详解javascript事件冒泡
Jan 09 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
vuejs2.0实现一个简单的分页示例
Feb 22 #Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 #Javascript
js实现无缝滚动图
Feb 22 #Javascript
JavaScript实现二分查找实例代码
Feb 22 #Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 #Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 #Javascript
原生JS实现幻灯片
Feb 22 #Javascript
You might like
PHP_Flame(Version:Progress)的原代码
2006/10/09 PHP
PHP MSSQL 存储过程的方法
2008/12/24 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
javascript Prototype 对象扩展
2009/05/15 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
Python configparser模块常用方法解析
2020/05/22 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
亲子活动总结
2014/04/26 职场文书
户外宣传策划方案
2014/05/25 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
实用求职信模板范文
2019/05/13 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
Python使用scapy模块发包收包
2021/05/07 Python
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技