基于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,});
})

 

posted @ 2014-01-03 17:08  decsev  阅读(237)  评论(0)    收藏  举报