基于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 cookies 设置、读取、删除实例代码
Apr 12 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
Node.js使用Angular简单示例
May 11 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
微信小程序实现蓝牙打印
Sep 23 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
PHP与SQL注入攻击[三]
2007/04/17 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
几个有趣的Javascript Hack
2010/07/24 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
python中p-value的实现方式
2019/12/16 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
开朗女孩的自我评价
2014/02/10 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
会议新闻稿
2015/07/17 职场文书
Python进度条的使用
2021/05/17 Python
详解NodeJS模块化
2021/06/15 NodeJs
MyBatis 动态SQL全面详解
2021/10/05 MySQL
Python语言中的数据类型-序列
2022/02/24 Python
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript