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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
javascript定时保存表单数据的代码
Mar 17 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
js实现抽奖效果
Mar 27 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
详解js 创建对象的几种方法
Mar 08 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 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类中private属性继承问题分析
2012/11/01 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
在vs2010中调试javascript代码方法
2011/02/11 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
Python代码调试的几种方法总结
2015/04/15 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
Python中的取模运算方法
2018/11/10 Python
python实现中文文本分句的例子
2019/07/15 Python
python基于opencv 实现图像时钟
2021/01/04 Python
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
农村婚礼证婚词
2014/01/10 职场文书
开工典礼策划方案
2014/05/23 职场文书
大学生个人学习总结
2015/02/15 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
学生会招新宣传语
2015/07/13 职场文书
总经理致辞
2015/07/29 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书