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中匿名函数的N种写法
Sep 08 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
vue3中的组件间通信
Mar 31 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 strncasecmp字符串比较的小技巧
2011/01/04 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
python中类的一些方法分析
2014/09/25 Python
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
python实现用户管理系统
2018/01/10 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
Julep官网:美容产品和指甲油
2017/02/25 全球购物
应用艺术毕业生的自我评价
2013/12/04 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
员工试用期自我评价
2014/09/18 职场文书
关于工作经历的证明书
2014/10/11 职场文书
三年级学生评语大全
2014/12/26 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书