基于jquery实现轮播特效


Posted in Javascript onApril 22, 2016

       轮播是学习jquery开始的第二个实现的动效,也是学习时间最久的一个。在实现轮播的过程中总是会遇到各种各样的问题,请教过很多人,也多次问过度娘。今天,也不敢果敢的说,可以马上写好一个轮播。

        希望是通过随笔的方式,记录下一些思维过程。

首先是html结构,一个简单的轮播,单张图片无缝轮播,主要分为三大层:div>ul>li,li里面的img图片。

其次,css样式:div固定住宽高,overflow:hidden;ul的宽度建议是动态获取(下一步会讲是怎么获取);关于li我习惯使用浮动,让他们依次排列,在ul上要记得清楚浮动(clear:both)。

重要的是jquery的方法,主要有用到的有animate(),setInterval(),hover()。在写方法之前,缕清一下动效的逻辑:图片依次循环自右向左滑过,当滑完最后一张时,第一张显示,如此重复。

1、获取li的个数length和宽度width 

var len=$('li').length,
    liWidth=$('li').width, 

        因为是无缝轮播,要实现自然的过渡,我们还得做点什么,当图片滑到最后一张时,怎么样才会很自然的过渡到第一张,这个时候,如果第一张就在最后一张的后面,就可以了,所以,我们需要将第一张clone后append到li的最后

$('li:first').clone().appendTo('ul')

2、获取ul的宽度:ul的宽度等于所有li的宽度加上克隆的li的宽度

ulWidth=liWidth*(len+1)

似乎准备工作都做好了,那下一步我们就尝试让他动起来,首先想到是animate()方法:

animate( properties [, duration ] [, easing ] [, complete ] ),

第一个参数properties:css的属性和值的对象,决定动画的效果,是上下还是左右等;

第二个参数duration:完成一个动画的时间,默认是400,单位是毫秒;

第三个参数easing:动画过渡使用的缓动函数,默认是swing(linear,swing),一般不用这个参数;

第四个参数complete:是指完成动画后执行的操作。

我们的动效是自右向左,所以通过改变ul的margin-left值来实现

$('ul').animate({
 'marign-left': -liWidth*index
},3000,function(){
 if(index==len){
  index=0;
  $('ul').css({'margin-left':'0px'})
 } 
})

其中index指的是li的索引值,当li的索引值等于li的length值的时候,也就是动画执行到了最后一张,那么直接让ul的margin-left为0,li的索引值也为0。

这样还存在一个隐患,暂时不提。

下一步,当鼠标离开div的时候,图片自动播放。这是要用到hover()和setInterval()

setInterval()在W3C是这样解释的:按照指定的周期(以毫秒计)来调用函数或计算表达式。不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

var autoPlay;
$('div').hover(function(){
 clearInterval(autoPlay); 
},function(){
 autoPlay=setInterval(function(){

$('ul').animate({

'marign-left': -liWidth*index
},3000,function(){
 if(index==len){
  index=0;
  $('ul').css({'margin-left':'0px'});

index++;
 } 
});
},3000) 
}).trigger('mouseleave');

这样,一个自动播放的功能似乎就实现了,可是我们还可以发现一个bug,第一帧停留的时间似乎有些长,为什么呢?

这个问题还是昨天得到了解决,当图片执行到最后一张时,他的index马上变为0,然后会执行两次,因此在这个判断中,我们需要当index为0时,让它自加1,index++,放到判断条件下。

还有一个问题,是昨天发现的,在这个轮播里面有两个时间,一个是动画执行时间,一个是播放时间,前者的时间一定要比后者的时间小,原因是js的执行顺序呢是自上而下的,,如果时间一致或者后者时间小于前者,那么,在这个时差里,动画将进不到判断条件里来,会一直播放,那么轮播就失败了。今天就分享到这里,下一次分享加上左右箭头和hover圆点的轮播效果。

附上完整的代码:

<html">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>轮播</title>
 <style>
  body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4{margin:0;padding:0;list-style:none;}
  body,button,input,select,textarea{font:12px Arial, Helvetica, sans-serif;color:#333;}
  input,select,textarea{font-size:100%;}
  .clearfix:after{display:block;content:".";height:0;visibility:hidden;clear:both;font-size:0;line-height:0;}
  .clearfix{*zoom:1;}
  .big-screen{width: 100%; height: 400px; overflow: hidden; margin: 40px 0;}
  .pic-list{height: 400px;}
  .pic-list li{float: left; width: 1920px; height: 400px;}
  </style>
</head>
<body>
 <div class="big-screen">
  <ul class="pic-list clearfix">
   <li>
    <a href="javascript:;">
     <img src="http://fed.yhd.cn:9000/1920x400/27ae60xfff" alt="picture" width="1920" height="400"/>
    </a>
   </li>
   <li>
    <a href="javascript:;">
     <img src="http://fed.yhd.cn:9000/1920x400/ae273axfff" alt="picture" width="1920" height="400"/>
    </a>
   </li>
   <li>
    <a href="javascript:;">
     <img src="http://fed.yhd.cn:9000/1920x400/2757aexfff" alt="picture" width="1920" height="400"/>
    </a>
   </li>
   <li>
    <a href="javascript:;">
     <img src="http://fed.yhd.cn:9000/1920x400/ae7d27xfff" alt="picture" width="1920" height="400"/>
    </a>
   </li>
  </ul>
 </div>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var ul=$('.pic-list'),
   li=ul.find('li'),
   liW=li.outerWidth(true),
   liLen=li.length,
   index=0,
   autoPlay;
  li.first().clone().appendTo(ul);
  ul.css({'width':liW*(liLen+1),'margin-left':-liW*index});
  function play(){
   if(!ul.is('animated')){
    ul.stop().animate({
     'margin-left':-liW*index
    },480,function(){
     if(index>liLen){
      index=0;
      ul.css({'margin-left':-liW*index});
      index++;
     }
    });
   }
  }
  $('.big-screen').hover(function(){
   clearInterval(autoPlay);
  },function(){
   autoPlay=setInterval(function(){
    play();
    index++;
   },500)
  }).trigger('mouseleave');

})
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
js实现简单的验证码
Dec 25 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
jquery插件Jplayer使用方法简析
Apr 22 #Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 #Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 #Javascript
JS简单循环遍历json数组的方法
Apr 22 #Javascript
JavaScript中数组去除重复的三种方法
Apr 22 #Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 #Javascript
动态加载JavaScript文件的两种方法
Apr 22 #Javascript
You might like
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
你应该知道的python列表去重方法
2017/01/17 Python
Python语言描述随机梯度下降法
2018/01/04 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
python变量命名的7条建议
2019/07/04 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
django model object序列化实例
2020/03/13 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
2015年维修工作总结
2015/04/25 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
医学会议开幕词
2016/03/03 职场文书
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
pandas取dataframe特定行列的实现方法
2021/05/24 Python
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript