zoukankan      html  css  js  c++  java
  • JQ轮播

    首先是html结构,一个简单的轮播,主要分为三大层:div>ul>li,li里面的img图片。

    其次,css样式:div固定住宽高,overflow:hidden;ul的宽度建议是动态获取(下一步会讲是怎么获取);关于li我习惯使用浮动,让他们依次排列,在ul上要清除浮动(clear:both)。

    重要的是jquery的方法,主要有用到的有animate(),setInterval(),hover()。在写方法之前,缕清一下动效的逻辑:图片依次循环自右向左滑过,当滑完最后一张时,第一张显示,如此重复

    1、获取li的个数length和宽度width 

    2、获取ul的宽度:ul的宽度等于所有li的宽度加上克隆的li的宽
    首先想到是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() 被调用或窗口被关闭。

     
  • 相关阅读:
    Angular Chart 使用说明(基于angular工程)
    文件系统(node.js学习笔记)
    错误名称:Uncaught SyntaxError: Unexpected token <
    错误名称:Uncaught SyntaxError: Unexpected identifier
    CSS自定义滚动条样式
    AngularJS directive简述
    Angular.forEach用法
    AngularJS操作DOM——angular.element
    vue自定义过滤器的创建和使用
    了解MIP(Mobile Instant Pages)
  • 原文地址:https://www.cnblogs.com/liaolei1/p/5562424.html
Copyright © 2011-2022 走看看