• 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下标的判断;

  • 相关阅读:
    开源协议
    markdown 语法和工具
    mac 终端 使用ftp命令
    谷歌囧大了!安统镜卓5.0刷入遇到system.img系像找不到
    linux下vi命令大全
    python编码处理:unicode字节串转成中文 各种字符串举例说明
    优秀前端资源备忘录
    mousewheel滚轮事件
    bootstrap插件之Carousel
    初识Node.js
  • 原文地址:https://www.cnblogs.com/hanbingljw/p/4652001.html
Copyright © 2020-2023  润新知