常用效果封装 自用

/*
{slide:滚动主体 ,li:单个元素: ,img:元素内图片 ,nav: 点击按钮,sudu:速度}
*/

function slide(arr){
    
    var mybody=document.documentElement|| document.body;
    var mywidth=0;
    var slide=$(arr.slide)
    var li = $(arr.li);
    var img=$(arr.img)
    var size=li.size();
    var Index=0;
    var auto=null;
    var mouse=0;
    var clientX=0;
    
    
    
    //初始化宽度func
    function resize(){
    
    mywidth=mybody.offsetWidth;
    for(i=0;i<size;i++){
        li.eq(i).css("width",mywidth+"px")
        }
    slide.css("left",-Index*mywidth)    

    }
    //执行初始化宽度
    resize()
    
    
    
    //循环增加导航按钮
    for(i=0;i<size;i++){
    $(arr.nav).html($(arr.nav).html()+"<li>"+(i+1)+"</li>")
    }
    
    
    var nav = $(arr.nav+" li")
    nav.eq(0).addClass("cur")
    
    
    //导航按钮点击动画
    nav.click(function(){
                clearInterval(auto)
                Index=$(this).index()-1
                AutoPlay()
                auto= setInterval(AutoPlay,arr.sudu)    
                })
        
        
    
    
    //轮播函数
    function AutoPlay(){
        Index++;
        if(Index>=size){
        Index=0;    
            }
        nav.eq(Index).addClass("cur").siblings().removeClass("cur")
        slide.stop(true,false).animate({left:-Index*mywidth+"px"},1000)
        
    }
    
    
    
    auto = setInterval(AutoPlay,arr.sudu)    
        
window.onresize=function(){    clearInterval(auto); resize    ();auto= setInterval(AutoPlay,arr.sudu);}

}


/*
ClickPlay()点击切换;
{nav:点击元素,slide: 切换元素}
*/
function ClickPlay(arr){
    var nav=$(arr.nav);
    var Index = 0;
    var slide = $(arr.slide)
    nav.mouseover(function(){
        Index=$(this).index();               
        $(this).addClass("cur").siblings().removeClass("cur");
        slide.eq(Index).show().siblings().hide()               
                       
                       })
    
    
    
    
    
    }

/*
wfgd()无缝滚动;

(最外层scroll元素ID,需要被复制的元素ID,复制的元素ID,速度,方向1||2)

*/
function wfgd(a,b,c,d,e){
    var a=document.getElementById(a);
    var b=document.getElementById(b);
    var c=document.getElementById(c);
    var d=d||20;//速度
    var e=e||1;
    var Auto=null;
        c.innerHTML=b.innerHTML;
        function auto(){
            if(a.scrollLeft>b.offsetWidth){
            a.scrollLeft-=b.offsetWidth;
            }else{
            a.scrollLeft++        
            }
                        }
        function auto2(){
            if(a.scrollTop>b.offsetHeight){
            a.scrollTop-=b.offsetHeight;
            }else{
            a.scrollTop++       
            }
                        }
    
    if(e==1){
        Auto = setInterval(function(){auto()},d);
    a.onmouseover=function(){
        clearInterval(Auto)
    }
    a.onmouseout=function(){
        Auto = setInterval(function(){auto()},d);
    }
        
        }
    if(e==2){
        Auto = setInterval(function(){auto2()},d);
    a.onmouseover=function(){
        clearInterval(Auto)
    }
    a.onmouseout=function(){
        Auto = setInterval(function(){auto2()},d);
    }    
        }    
    
    
}

/*定时滚动
{dlide:滚动主体,slide2:复制内容,li:子内容,juli:滚动距离,sudu:速度}

*/


function IntervalSlide(arr){
    var slide = $(arr.slide);
    var slide2 = $(arr.slide2)
    var li = $(arr.li)
    var size = Math.ceil( li.size()/2);
    var juli = arr.juli;
    var looksize = arr.looksize;
    var Index = 0;
    var sudu = arr.sudu
    
    slide.html(slide.html()+slide.html());
    
    function IntervalPlay(){
        
        Index++;
        if(Index>size){
        Index = 1;    
        slide.css("top",0+"px")    
        
            
        }
        
        slide.animate({top:-Index*juli+"px"},1000)
        
        }
        
    setInterval(IntervalPlay,sudu)
    
    }

/*{slide:滚动主体 ,li:单个元素: ,img:元素内图片 ,nav: 点击按钮,sudu:速度}*/
function slide(arr){var mybody=document.documentElement|| document.body;var mywidth=0;var slide=$(arr.slide)var li = $(arr.li);var img=$(arr.img)var size=li.size();var Index=0;var auto=null;var mouse=0;var clientX=0;//初始化宽度funcfunction resize(){mywidth=mybody.offsetWidth;for(i=0;i<size;i++){li.eq(i).css("width",mywidth+"px")}slide.css("left",-Index*mywidth)
}//执行初始化宽度resize()//循环增加导航按钮for(i=0;i<size;i++){$(arr.nav).html($(arr.nav).html()+"<li>"+(i+1)+"</li>")}var nav = $(arr.nav+" li")nav.eq(0).addClass("cur")//导航按钮点击动画nav.click(function(){clearInterval(auto)Index=$(this).index()-1AutoPlay()auto= setInterval(AutoPlay,arr.sudu)})//轮播函数function AutoPlay(){Index++;if(Index>=size){Index=0;}nav.eq(Index).addClass("cur").siblings().removeClass("cur")slide.stop(true,false).animate({left:-Index*mywidth+"px"},1000)}auto = setInterval(AutoPlay,arr.sudu)window.onresize=function(){clearInterval(auto); resize();auto= setInterval(AutoPlay,arr.sudu);}
}

/*ClickPlay()点击切换;{nav:点击元素,slide: 切换元素}*/function ClickPlay(arr){var nav=$(arr.nav);var Index = 0;var slide = $(arr.slide)nav.mouseover(function(){Index=$(this).index();   $(this).addClass("cur").siblings().removeClass("cur");slide.eq(Index).show().siblings().hide()         })}
/*wfgd()无缝滚动;
(最外层scroll元素ID,需要被复制的元素ID,复制的元素ID,速度,方向1||2)
*/function wfgd(a,b,c,d,e){    var a=document.getElementById(a);    var b=document.getElementById(b);    var c=document.getElementById(c);    var d=d||20;//速度var e=e||1;    var Auto=null;        c.innerHTML=b.innerHTML;        function auto(){            if(a.scrollLeft>b.offsetWidth){            a.scrollLeft-=b.offsetWidth;            }else{            a.scrollLeft++                    }        }function auto2(){            if(a.scrollTop>b.offsetHeight){            a.scrollTop-=b.offsetHeight;            }else{            a.scrollTop++                   }        }if(e==1){Auto = setInterval(function(){auto()},d);    a.onmouseover=function(){        clearInterval(Auto)    }    a.onmouseout=function(){        Auto = setInterval(function(){auto()},d);    }}if(e==2){Auto = setInterval(function(){auto2()},d);    a.onmouseover=function(){        clearInterval(Auto)    }    a.onmouseout=function(){        Auto = setInterval(function(){auto2()},d);    }}    }
/*定时滚动{dlide:滚动主体,slide2:复制内容,li:子内容,juli:滚动距离,sudu:速度}
*/

function IntervalSlide(arr){var slide = $(arr.slide);var slide2 = $(arr.slide2)var li = $(arr.li)var size = Math.ceil( li.size()/2);var juli = arr.juli;var looksize = arr.looksize;var Index = 0;var sudu = arr.suduslide.html(slide.html()+slide.html());function IntervalPlay(){Index++;if(Index>size){Index = 1;slide.css("top",0+"px")}slide.animate({top:-Index*juli+"px"},1000)}setInterval(IntervalPlay,sudu)}