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 new Date() 出现NaN 的分析
Oct 23 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
javascript与有限状态机详解
May 08 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
Javascript实现计算个人所得税
May 10 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
token 机制和实现方式
Dec 15 Javascript
JS实现简易日历效果
Jan 25 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-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
js查错流程归纳
2012/05/04 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
setTimeout学习小结
2017/02/08 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中input和raw_input的一点区别
2014/10/21 Python
Python列表切片用法示例
2017/04/19 Python
详解python的webrtc库实现语音端点检测
2017/05/31 Python
django初始化数据库的实例
2018/05/27 Python
Python2包含中文报错的解决方法
2018/07/09 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
Python实现手势识别
2020/10/21 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
经济学博士求职自荐信范文
2013/11/23 职场文书
草船借箭教学反思
2014/02/03 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
文艺演出策划方案
2014/06/07 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
工程承包协议书范本
2014/09/29 职场文书
民事诉讼代理词
2015/05/25 职场文书
python中%格式表达式实例用法
2021/06/18 Python