Jquery轮播效果实现过程解析


Posted in Javascript onMarch 30, 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>

以上就是为大家分享的jquery轮播效果完整代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
用js实现计算加载页面所用的时间
Apr 02 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
Vue左滑组件slider使用详解
Aug 21 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 #Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 #Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 #Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 #Javascript
React.js入门学习第一篇
Mar 30 #Javascript
Node.js操作mysql数据库增删改查
Mar 30 #Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 #Javascript
You might like
PHP单链表的实现代码
2016/07/05 PHP
php实现的双色球算法示例
2017/06/20 PHP
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
js给selected添加options的方法
2015/05/06 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
Python对象转JSON字符串的方法
2016/04/27 Python
Django 反向生成url实例详解
2019/07/30 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
奥巴马竞选演讲稿
2014/05/15 职场文书
求职信怎么写
2014/05/23 职场文书
毕业横幅标语
2014/10/08 职场文书
2015高考寄语集锦
2015/02/27 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL
Python中with上下文管理协议的作用及用法
2022/03/18 Python