基于jquery实现轮播特效_jquery-js教程-PHP中文网

首页

web前端

js教程

基于jquery实现轮播特效_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:04 PM

轮播是学习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>

登录后复制

以上就是本文的全部内容，希望对大家的学习有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7627

CakePHP 教程

1389

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

140

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

谁得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。