www.qjdy.com-奇迹赌场 > 佳美特设计 > www.qjdy.com当图片滑到最后一张时

原标题:www.qjdy.com当图片滑到最后一张时

浏览次数:198 时间:2019-07-11

轮播是学习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://www.jmtsj8.com/uploads/allimg/190711/21360HT3-4.jpg"></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>  

以上正是为大家享受的jquery轮播效果完全代码,希望对大家的读书抱有援助。

您或然感兴趣的稿子:

  • 基于JQuery的贯彻图片轮播效果(主旨图)
  • 12款出色的美眉型—jquery图片轮播插件—前端开拓必备
  • 据他们说JQuery完成图片轮播效果(大旨图)
  • 基于jquery达成轮播宗旨图插件
  • 老大棒的jQuery图片轮播效果
  • 基于jquery达成轮播特效
  • jquery完成左右无缝轮播图
  • jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
  • jQuery插件实现图片轮播特效
  • 轻易易行完毕jQuery进程条轮播实例代码

本文由www.qjdy.com-奇迹赌场发布于佳美特设计,转载请注明出处:www.qjdy.com当图片滑到最后一张时

关键词: mg电子游戏开户

上一篇:没有了

下一篇:没有了