码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-02-11 14:33:54      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:

/**
 * 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;
    }
};

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

标签:

原文地址:http://blog.csdn.net/xiaomogg/article/details/43733661

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!