zoukankan      html  css  js  c++  java
  • slide逻辑

    //一个简单的slide 逻辑:
    var
    len = $('.huge-benefit-09 ul li').length; var oLiWidth = $('.huge-benefit-09 ul li').css('width'); //需要显示的宽度 for(var i=1; i<len; i++){ $('.huge-benefit-09 ul li').eq(i).css('left',parseInt(oLiWidth)); } //初始其他li的位置 var iNow = 0; //当前li的下标 var onOff = true; //预留开关功能。。。其实并无卵用 $('.arrow_left').click(function(){ //点击,左滑动 if(onOff){ onOffChange(); if(iNow>=len-1){ $('.huge-benefit-09 ul li').eq(iNow).animate({left:-parseInt(oLiWidth)},1000,moveRight); //归右 iNow = 0; } else{ $('.huge-benefit-09 ul li').eq(iNow).animate({left:-parseInt(oLiWidth)},1000); iNow++; } $('.huge-benefit-09 ul li').eq(iNow).css('left',parseInt(oLiWidth)); $('.huge-benefit-09 ul li').eq(iNow).animate({left:0},1000,onOffChange); } }) $('.arrow_right').click(function(){ //点击,右滑动 if (onOff) { onOffChange(); if(iNow<=0){ $('.huge-benefit-09 ul li').eq(iNow).animate({left:parseInt(oLiWidth)},1000,moveLeft); //归左 iNow = len-1; } else{ $('.huge-benefit-09 ul li').eq(iNow).animate({left:parseInt(oLiWidth)},1000); iNow--; } $('.huge-benefit-09 ul li').eq(iNow).css('left',-parseInt(oLiWidth)); $('.huge-benefit-09 ul li').eq(iNow).animate({left:0},1000,onOffChange); //显示 }; }) function moveRight(){ for(var j=1;j<len;j++){ $('.huge-benefit-09 ul li').eq(j).css('left',parseInt(oLiWidth)); } } function moveLeft(){ for(var j=0;j<len-1;j++){ $('.huge-benefit-09 ul li').eq(j).css('left',-parseInt(oLiWidth)); } } function onOffChange(){ onOff = !onOff; } $('.huge-benefit-08 .zt-con a').click(function(){ if($(this).index()==iNow) return; else if($(this).index()<iNow){ $('.huge-benefit-09 ul li').eq(iNow).animate({left:parseInt(oLiWidth)},1000); $('.huge-benefit-09 ul li').eq($(this).index()).css('left',-parseInt(oLiWidth)); } else{ $('.huge-benefit-09 ul li').eq(iNow).animate({left:-parseInt(oLiWidth)},1000) $('.huge-benefit-09 ul li').eq($(this).index()).css('left',parseInt(oLiWidth)); } iNow = $(this).index(); $('.huge-benefit-09 ul li').eq($(this).index()).animate({left:0},1000) })

    注释:一个简单slide的逻辑:

    1.获取li的个数,和显示区域的宽度

    2.moveLeft,moveRight 两种临界归左,归右

    3.点击进行时的两个li的动作,和当前iNow下标的判断;

  • 相关阅读:
    JQuery onload、ready概念介绍及使用方法
    jquery获取第几个元素的方法总结
    CSS中隐藏内容的3种方法及属性值
    jQuery获取页面及个元素高度、宽度【转】
    数据仓库原理<2>:数据仓库系统的体系结构
    数据仓库原理<1>:数据库与数据仓库
    题注在论文图表编号中的使用
    初见Python<7>:Python操作mysql
    初见Python<5>:条件、循环和其他语句
    初见Python<4>:字典
  • 原文地址:https://www.cnblogs.com/hanbingljw/p/4652001.html
Copyright © 2011-2022 走看看