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 Dialog 实践分享
Oct 22 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
javascript实现列表切换效果
May 02 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
javascript History对象原理解析
Feb 17 Javascript
js实现菜单跳转效果
Dec 11 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编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
PHP Reflection API详解
2015/05/12 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
python pygame实现球球大作战
2019/11/25 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
如何基于Python实现自动扫雷
2020/01/06 Python
Python更新所有已安装包的操作
2020/02/13 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
python实现定时发送邮件
2020/12/23 Python
通信工程毕业生自荐信
2013/11/01 职场文书
财政专业求职信范文
2014/02/19 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
介绍信范文
2015/01/31 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
Elasticsearch 配置详解
2022/04/19 Java/Android