Jquery轮播效果实现过程解析

站长资源 2024/12/1 佚名

2 0 1

轮播是学习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="/UploadFiles/2021-04-02/27ae60xfff">

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

Jquery轮播效果,Jquery轮播

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“Jquery轮播效果实现过程解析”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月01日

Jquery轮播效果实现过程解析

网页中JS函数自动执行常用三种方法

修复jQuery tablesorter无法正确排序的bug(加千分位数字后)

评论“Jquery轮播效果实现过程解析”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接