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 相关文章推荐
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 Javascript
初识简单却不失优雅的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中通过smtp发邮件的类,测试通过
2007/01/22 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
Python备份Mysql脚本
2008/08/11 Python
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
Python画图高斯分布的示例
2019/07/10 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
python实现多线程端口扫描
2019/08/31 Python
Python3离线安装Requests模块问题
2019/10/13 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
甜点店创业计划书
2014/01/27 职场文书
护士求职自荐信范文
2014/03/19 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
爱我中华教学反思
2014/04/28 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
管理人员岗位职责
2015/02/14 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS