基于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 相关文章推荐
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
js继承实现方法详解
Dec 16 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 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 如何向 MySQL 发送数据
2006/10/09 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
详解jQuery选择器
2016/12/21 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
使用Python脚本操作MongoDB的教程
2015/04/16 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
Python发送邮件实现基础解析
2020/08/14 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
三年大学生活自我鉴定
2014/01/21 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
企业2014年度工作总结
2014/12/10 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
小组组名及励志口号
2015/12/24 职场文书
2016年母亲节广告语
2016/01/28 职场文书