jQuery实现的多张图无缝滚动效果【测试可用】


Posted in Javascript onSeptember 12, 2016

本文实例讲述了jQuery实现的多张图无缝滚动效果。分享给大家供大家参考,具体如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slider</title>
<style>
*{
  padding: 0;
  margin: 0;
}
li{
  list-style-type: none;
}
body{
  margin: 50px;
}
.wrap{
  border: 3px solid #f00;
  width: 600px;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.wrap ul{
  overflow: hidden;
  position:absolute;
  width: 1600px;
  left: 0;
  top: 0;
  _height:1px;
}
.wrap ul li{
  float: left;
  width: 200px;
}
</style>
</head>
<body>
<a href="javascript:;" class="goLeft">向左走</a>
<a href="javascript:;" class="goRight">向右走</a>
<div class="wrap">
  <ul>
    <li><img src="1.jpg" alt=""></li>
    <li><img src="2.jpg" alt=""></li>
    <li><img src="3.jpg" alt=""></li>
    <li><img src="4.jpg" alt=""></li>
    <li><img src="5.jpg" alt=""></li>
  </ul>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script src="slider.js"></script>
</body>
</html>

slider.js

// 如果想要使一个元素运动起来,一般情况下这个元素须要具有position属性absolute/relative
$(function(){
  var oul = $('.wrap ul');
  var oulHtml = oul.html();
  oul.html(oulHtml+oulHtml)
  var timeId = null;
  var ali = $('.wrap ul li');
  var aliWidth = ali.eq(0).width();
  var aliSize = ali.size();
  var ulWidth = aliWidth*aliSize;
  oul.width(ulWidth); //1600px
  var speed = 2;
  function slider(){
    if(speed<0){
      if(oul.css('left')==-ulWidth/2+'px'){
      oul.css('left',0);
      }
      oul.css('left','+=-2px');
    }
    if(speed>0){
      if(oul.css('left')=='0px'){
      oul.css('left',-ulWidth/2+'px');
      }
      oul.css('left','+='+speed+'px');
    }
   }
  // setInterval()函数的作用是:每隔一段时间,执行该函数里的代码
   timeId = setInterval(slider,30);
  $('.wrap').mouseover(function(){
    // clearInterval()函数的作用是用来清除定时器
    clearInterval(timeId);
  });
  $('.wrap').mouseout(function(){
    timeId = setInterval(slider,30);
  });
  $('.goLeft').click(function(){
    speed=-2;
  });
  $('.goRight').click(function(){
    speed=2;
  });
});

效果图如下:

jQuery实现的多张图无缝滚动效果【测试可用】

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
用JS写的一个TableView控件代码
Jan 23 Javascript
jQuery 创建Dom元素
May 07 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
初识简单却不失优雅的Vue.js
Sep 12 #Javascript
jQuery实现简单的tab标签页效果
Sep 12 #Javascript
深入探讨Vue.js组件和组件通信
Sep 12 #Javascript
前端框架Vue.js中Directive知识详解
Sep 12 #Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 #Javascript
jQuery过滤选择器用法示例
Sep 12 #Javascript
强大Vue.js组件浅析
Sep 12 #Javascript
You might like
php在线打包程序源码
2008/07/27 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
php实现简易计算器
2020/08/28 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
使用python绘制常用的图表
2016/08/27 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
Python是怎样处理json模块的
2020/07/16 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
python 解决函数返回return的问题
2020/12/05 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
Python中如何定义一个函数
2016/09/06 面试题
写给女朋友的检讨书
2014/01/28 职场文书
迁户口计划生育证明
2014/10/19 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
员工辞退通知书
2015/04/17 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
一起来学习Python的元组和列表
2022/03/13 Python