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读取两种结构的xml的代码
Nov 05 Javascript
JavaScript CSS菜单功能 改进版
Dec 20 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 Javascript
利用js canvas实现五子棋游戏
Oct 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代码
2006/12/06 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
python实现socket端口重定向示例
2014/02/10 Python
Python实现读取并保存文件的类
2017/05/11 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
python web框架 django wsgi原理解析
2019/08/20 Python
使用python+whoosh实现全文检索
2019/12/09 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
python中spy++的使用超详细教程
2021/01/29 Python
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
护理学中专毕业生求职信
2013/11/11 职场文书
优秀护士获奖感言
2014/02/20 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
中学生寄语大全
2014/04/03 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
小学元宵节活动总结
2015/02/06 职场文书
房地产项目合作意向书
2015/05/08 职场文书
少先队工作总结2015
2015/05/13 职场文书
亮剑观后感300字
2015/06/05 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers