基于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 getStyle函数(获取元素的样式)
Jun 06 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 Javascript
vue $mount 和 el的区别说明
Sep 11 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 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
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
Gird事件机制初级读本
2007/03/10 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
解决Mac node版本升级失败的问题
2018/05/16 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
python区分不同数据类型的方法
2019/10/14 Python
Python运行异常管理解决方案
2020/03/09 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
幼儿园实习自我鉴定
2013/12/15 职场文书
妇产医师自荐信
2014/01/29 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
python Polars库的使用简介
2021/04/21 Python
Android实现图片九宫格
2022/06/28 Java/Android