基于jquery的滚动图插件
slide.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>jquery_dec_slide</title> <style> *{padding:0px; margin:0px; list-style: none;} .slide{ width:500px; height:300px; margin:50px auto; overflow:hidden; position: relative; _zoom:1; border:1px solid #000;} .slide_con{width:500px; height:300px; position:absolute; top:0px;} .left,.right{ position: absolute; z-index: 100;} .left{ top:50%; left:0px;} .right{ top:50%; right:0px;} .slide_nav{ position:absolute; bottom:10px; left:50%;} .slide_nav span{ background: #fff; padding:0 10px;} .slide_nav span.cur{ color:#000; font-weight:bold; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script src="jquery_dec_slide.js"></script> </head> <body> <div class="slide" id="fade"> <div class="slide_con" style="background:yellow;">a</div> <div class="slide_con" style="background:red;">b</div> <div class="slide_con" style="background:green;">c</div> </div> <div class="slide" id="roll"> <div class="slide_con" style="background:yellow;">a</div> <div class="slide_con" style="background:red;">b</div> <div class="slide_con" style="background:green;">c</div> </div> </body> </html>
jquery_dec_slide.js
/* #参数【xg:fade||roll interval定时器 times切换效果的时间】 #version:2.2 #by dec 20130723 #qq:261754000 */ (function($){ $.fn.slide= function(option){ var defaults= { current: 0, next: 1, fx: "z", interval: 3000, times: 2000, xg: "roll" } var settings = $.extend(defaults, option || {}); var base = $(this); var slide_boxs= $("."+ base.attr("class") +"_con",base); slide_boxs.css("left","-100%"); slide_boxs.eq(settings.current).css("left","0%"); var slide_boxs_length= slide_boxs.length; var lrHtml = "<a class='left'><<</a><a class='right'>>></a>"; base.append(lrHtml); var navHtml=''; for(var i = 1; i <= slide_boxs_length; i++){ navHtml+="<span>" + i + "</span>"; } navHtml = '<div class="slide_nav">' + navHtml + '</div>'; base.append(navHtml); base.find('.slide_nav span').removeClass("cur").eq(settings.current).addClass("cur"); //bind events function var bindFun = function(){ base.find('.slide_nav span:not(.cur)').each(function(){ $(this).bind("click",function(){numb(this)}) }); base.find('.left').bind("click",function(){prev()}); base.find('.right').bind("click",function(){next()}); } //unbind events function var unbindFun = function(){ base.find('.slide_nav span').each(function(){ $(this).unbind("click") }); base.find('.left').unbind("click"); base.find('.right').unbind("click"); } //active bind events bindFun(); base.hover(function(){ window.clearInterval(dt); },function(){ intervalFun(); }) var next= function(){ window.clearInterval(dt); settings.next = settings.current+1; if(settings.next>=slide_boxs_length){ settings.next = 0; } settings.fx= "z"; slideFun(); } var prev= function(){ window.clearInterval(dt); settings.next = settings.current-1; if(settings.next<0){ settings.next = slide_boxs_length - 1; } settings.fx= "y"; slideFun(); } var numb= function(e){ clearInterval(dt); $(e).addClass("cur").siblings().removeClass("cur"); settings.next = $(e).index(); console.log(settings.next); if(settings.next>settings.current){ settings.fx= "z"; }else{ settings.fx= "y"; } slideFun(); } var auto = function(){ if(settings.fx=="z"){ settings.next = settings.current+1; if(settings.next>=slide_boxs_length){ settings.next = 0; } }else{ settings.next = settings.current-1; if(settings.next<0){ settings.next = slide_boxs_length - 1; } } slideFun(); } var dt; var intervalFun = function(){ dt = setInterval(auto,settings.interval); } //slide function var slideFun= function(){ //unbind events unbindFun(); if(settings.xg=="roll"){ if(settings.fx=="z"){ slide_boxs.eq(settings.next).css("left","100%").animate({left:"0%"},settings.times); slide_boxs.eq(settings.current).animate({left:"-100%"},settings.times); }else{ slide_boxs.eq(settings.next).css("left","-100%").animate({left:"0%"},settings.times); slide_boxs.eq(settings.current).animate({left:"100%"},settings.times); } }else if(settings.xg=="fade"){ slide_boxs.eq(settings.next).css("left","0%").fadeIn(settings.times); slide_boxs.eq(settings.current).fadeOut(settings.times).css({left:"-100%"}); } //bind events setTimeout(bindFun,settings.times); settings.current = settings.next; base.find('.slide_nav span').removeClass("cur").eq(settings.current).addClass("cur"); } intervalFun(); } })(jQuery); $(function(){ $("#fade").slide({xg:"fade"}); $("#roll").slide({times:1000,}); })
