简易版的suppleSlide 求助 如何简介代码

/**
 * Created by Administrator on 2015/2/9.
 */
function XmSlide()
{
    this.defaults={//默认参数
        delay:0,
        type:"slide",
        effect:"fade",
        iNow:0,
        autoPlay:false,
        Interval:null,
        interTime:2500,
        titCell:".hd li",
        mainCell:".bd",
        trigger:"mouseover",
        prevCell:"",
        nextCell:"",
        pnLoop:true
    }
}
XmSlide.prototype.init=function(opt)
{
    var This=this;
    $.extend(This.defaults,opt);
    This.bdBox();
    This.trigger();
    This.nextPrev();
    This.startMove(This.defaults.effect);
    if(This.defaults.autoPlay==true)
    {
        This.autoplay();
    }
};
XmSlide.prototype.trigger=function()
{
    var This=this;
    $(This.defaults.titCell).eq(This.defaults.iNow).addClass("active");
    $(This.defaults.titCell).on(This.defaults.trigger,function()
    {
        if(This.defaults.trigger=="mouseover")
        {
            if(!$(This.defaults.mainCell +" ul").is(":animated"))//这里有问题
            {
                This.defaults.iNow=$(this).index();
                This.hdTabClass(This.defaults.iNow);
                This.startMove(This.defaults.effect);
            }
        }
        else
        {
            This.defaults.iNow=$(this).index();
            This.hdTabClass(This.defaults.iNow);
            This.startMove(This.defaults.effect);
        }


    });
};
XmSlide.prototype.hdTabClass=function(iNow)
{
    var This=this;
        $(This.defaults.titCell).eq(iNow).addClass("active").siblings().removeClass("active");
};


XmSlide.prototype.bdBox=function()
{
    var This=this;
    switch(This.defaults.effect)
    {
        case "fade":case "show":


        break;
        case "left":
            var len=$(This.defaults.mainCell+" li").length;
            $(This.defaults.mainCell+" ul").width($(This.defaults.mainCell+" li").eq(0).outerWidth(true)*len);
            break;
        case "leftMarquee":case "topMarquee":


        break;
        case "leftLoop":
            $(This.defaults.mainCell+" li").first().clone(true).appendTo($(This.defaults.mainCell+" ul"));
            var lens=$(This.defaults.mainCell+" li").length;
            $(This.defaults.mainCell+" li").eq(lens-2).clone(true).prependTo($(This.defaults.mainCell+" ul"));
            $(This.defaults.mainCell +" ul").css("left",-$(This.defaults.mainCell+" li").outerWidth(true));
            lens=$(This.defaults.mainCell+" li").length;
            $(This.defaults.mainCell+" ul").width($(This.defaults.mainCell+" li").outerWidth(true)*lens);
        break;
        case "topLoop":
            $(This.defaults.mainCell+" li").first().clone(true).appendTo($(This.defaults.mainCell+" ul"));
            var lenss=$(This.defaults.mainCell+" li").length;
            $(This.defaults.mainCell+" li").eq(lenss-2).clone(true).prependTo($(This.defaults.mainCell+" ul"));
            $(This.defaults.mainCell +" ul").css("top",-$(This.defaults.mainCell+" li").outerHeight(true));
            lenss=$(This.defaults.mainCell+" li").length;
           // $(This.defaults.mainCell+" ul").height($(This.defaults.mainCell+" li").outerHeight(true)*lenss);
            break;
    }


};
XmSlide.prototype.nextPrev=function()
{
  var This=this;
    $(This.defaults.prevCell).click(function(){
        if(!$(This.defaults.mainCell +" ul").is(":animated"))
        {
            This.defaults.iNow++;
            This.startMove(This.defaults.effect);
            This.hdTabClass(This.defaults.iNow);
        }


    });
    $(This.defaults.nextCell).click(function(){
        if(!$(This.defaults.mainCell +" ul").is(":animated"))
        {
            This.defaults.iNow--;
            This.startMove(This.defaults.effect);
            This.hdTabClass(This.defaults.iNow);
        }


    });


};
XmSlide.prototype.autoplay=function()
{
  var This=this;
    This.defaults.Interval=setInterval(function(){
        This.defaults.iNow++;
        This.hdTabClass(This.defaults.iNow);
        This.startMove(This.defaults.effect);
    },This.defaults.interTime);
        $(This.defaults.mainCell).mouseenter(function() {clearInterval(This.defaults.Interval); });
        $(This.defaults.mainCell).mouseleave(function(){This.defaults.Interval=setInterval(function(){This.defaults.iNow++;This.startMove(This.defaults.effect);This.hdTabClass(This.defaults.iNow);},This.defaults.interTime);});
    $(This.defaults.prevCell).mouseenter(function() {clearInterval(This.defaults.Interval); });
    $(This.defaults.prevCell).mouseleave(function(){This.defaults.Interval=setInterval(function(){This.defaults.iNow++;This.startMove(This.defaults.effect);This.hdTabClass(This.defaults.iNow);},This.defaults.interTime);});
    $(This.defaults.nextCell).mouseenter(function() {clearInterval(This.defaults.Interval); });
    $(This.defaults.nextCell).mouseleave(function(){This.defaults.Interval=setInterval(function(){This.defaults.iNow++;This.startMove(This.defaults.effect);This.hdTabClass(This.defaults.iNow);},This.defaults.interTime);});
    $(This.defaults.titCell).mouseenter(function() {clearInterval(This.defaults.Interval); });
    $(This.defaults.titCell).mouseleave(function(){This.defaults.Interval=setInterval(function(){This.defaults.iNow++;This.startMove(This.defaults.effect);This.hdTabClass(This.defaults.iNow);},This.defaults.interTime);})
};
XmSlide.prototype.startMove=function(effects)
{
    var This=this;
  switch(This.defaults.effect)
    {
        case "fade":
            if(This.defaults.iNow>$(This.defaults.titCell).length-1)//有疑问
            {
                This.defaults.iNow=0;
                $(This.defaults.mainCell+" li").eq(This.defaults.iNow).fadeIn().siblings().fadeOut();
            }
            else if(This.defaults.iNow<0)
            {
                This.defaults.iNow=$(This.defaults.titCell).length-1;
                $(This.defaults.mainCell+" li").eq(This.defaults.iNow).fadeIn().siblings().fadeOut();
            }
            else
            {
                $(This.defaults.mainCell+" li").eq(This.defaults.iNow).fadeIn().siblings().fadeOut();
            }
            break;
         case "show":
            if(This.defaults.iNow>$(This.defaults.titCell).length-1)//有疑问
            {
                This.defaults.iNow=0;
                $(This.defaults.mainCell+" li").eq(This.defaults.iNow).show().siblings().hide();
            }
            else if(This.defaults.iNow<0)
            {
                This.defaults.iNow=$(This.defaults.titCell).length-1;
                $(This.defaults.mainCell+" li").eq(This.defaults.iNow).show().siblings().hide();
            }
            else
            {
                $(This.defaults.mainCell+" li").eq(This.defaults.iNow).show().siblings().hide();
            }
            break;
       case "left":
            if(This.defaults.iNow>$(This.defaults.titCell).length-1)//有疑问
            {
                This.defaults.iNow=0;
                $(This.defaults.mainCell +" ul").animate({"left":-(This.defaults.iNow)*$(This.defaults.mainCell+" li").outerWidth(true)},300);
            }
            else if(This.defaults.iNow<0)
            {
                This.defaults.iNow=$(This.defaults.titCell).length-1;
                $(This.defaults.mainCell +" ul").animate({"left":-(This.defaults.iNow)*$(This.defaults.mainCell+" li").outerWidth(true)},300);
            }
            else
            {
                $(This.defaults.mainCell +" ul").animate({"left":-(This.defaults.iNow)*$(This.defaults.mainCell+" li").outerWidth(true)},300);
            }
            $(This.defaults.mainCell +" ul").animate({"left":-(This.defaults.iNow)*$(This.defaults.mainCell+" li").outerWidth(true)},300);
            break;
        case "top":
            if(This.defaults.iNow>$(This.defaults.titCell).length-1)//有疑问
            {
                This.defaults.iNow=0;
                $(This.defaults.mainCell +" ul").animate({"top":-(This.defaults.iNow)*$(This.defaults.mainCell+" li").outerHeight(true)},300);
            }
            else if(This.defaults.iNow<0)
            {
                This.defaults.iNow=$(This.defaults.titCell).length-1;
                $(This.defaults.mainCell +" ul").animate({"top":-(This.defaults.iNow)*$(This.defaults.mainCell+" li").outerHeight(true)},300);
            }
            else
            {
                $(This.defaults.mainCell +" ul").animate({"top":-(This.defaults.iNow)*$(This.defaults.mainCell+" li").outerHeight(true)},300);
            }
            $(This.defaults.mainCell +" ul").animate({"top":-(This.defaults.iNow)*$(This.defaults.mainCell+" li").outerHeight(true)},300);
            break;
        case "leftLoop":
            $(This.defaults.mainCell +" ul").animate({"left":-(This.defaults.iNow+1)*$(This.defaults.mainCell+" li").outerWidth(true)},400,function()//运动的This.defaults.iNow会比按钮的+1,所有效果的This.defaults.iNow控制一致
            {//按钮索引0 1 2 3 4 5
     // 运动对应的索引-1 0 1 2 3 4


               if(This.defaults.iNow==-1)
               {
               //     $(This.defaults.mainCell +" ul").css("left","-1600px");
                  // This.defaults.iNow=3;
                     $(This.defaults.mainCell +" ul").css("left",(-$(This.defaults.titCell).length)*$(This.defaults.mainCell+" li").outerWidth(true));
                   This.defaults.iNow=$(This.defaults.titCell).length-1;
                   This.hdTabClass(This.defaults.iNow);
               }
               // else if(This.defaults.iNow==4)
               else if(This.defaults.iNow==$(This.defaults.titCell).length)
                {
               //   $(This.defaults.mainCell +" ul").css("left","-400px");
                    This.defaults.iNow=0;
                  $(This.defaults.mainCell +" ul").css("left",-$(This.defaults.mainCell+" li").outerWidth(true));
                    This.hdTabClass(This.defaults.iNow);
              }
               // console.log($(This.defaults.mainCell+" li"));
                //console.log(This.defaults.iNow)
            });
            break;
      case "topLoop":
          $(This.defaults.mainCell +" ul").animate({"top":-(This.defaults.iNow+1)*$(This.defaults.mainCell+" li").outerHeight(true)},400,function()//运动的This.defaults.iNow会比按钮的+1,所有效果的This.defaults.iNow控制一致
          {//按钮索引0 1 2 3 4 5
              // 运动对应的索引-1 0 1 2 3 4


              if(This.defaults.iNow==-1)
              {
                  //     $(This.defaults.mainCell +" ul").css("left","-1600px");
                  // This.defaults.iNow=3;
                  $(This.defaults.mainCell +" ul").css("top",(-$(This.defaults.titCell).length)*$(This.defaults.mainCell+" li").outerHeight(true));
                  This.defaults.iNow=$(This.defaults.titCell).length-1;
                  This.hdTabClass(This.defaults.iNow);
              }
              // else if(This.defaults.iNow==4)
              else if(This.defaults.iNow==$(This.defaults.titCell).length)
              {
                  //   $(This.defaults.mainCell +" ul").css("left","-400px");
                  This.defaults.iNow=0;
                  $(This.defaults.mainCell +" ul").css("top",-$(This.defaults.mainCell+" li").outerHeight(true));
                  This.hdTabClass(This.defaults.iNow);
              }
              //console.log($(This.defaults.mainCell+" li"));
              //console.log(This.defaults.iNow)
          });
          break;
    }
};

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陆康永

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值