jquery自己写的幻灯片插件，好用不解释

浏览数：36 / 时间：2015年06月09日

<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title></title>
    <style type="text/css">
    #slideBox{ width: 100%; height: 540px; overflow:hidden;position: relative;}
    ul,li{padding: 0; margin: 0; width: 100%;}
    li{ list-style: none;}
    .slideImg{ height: 500px; overflow: hidden; position: relative;}
    .slideImg li{position: absolute;}
    .slideBtn{ position: absolute; bottom: 0;left: 30%;}
    .slideBtn li{ display: block;float: left; cursor: pointer; width: 100px;height: 40px;background-color: #f60; border-right: 1px solid #fff;}
    .slideBtn li.active{ background-color: #f00}
    </style>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
    ;(function($){
        $.fn.slideCom=function(options){
            var options=$.extend(this,options), i=0,timer;
           this.each(function(){
            var _this=$(this),
                   slideImg=_this.find(options.slideImg),
                   slideBtn=_this.find(options.slideBtn);
                    timer=setInterval(slideImgFun,options.times);
                     _this.hover(function(){
                        clearInterval(timer);
                   },function(){
                        timer=setInterval(slideImgFun,options.times);
                   });

                  var slideImgFun=function(){
                        i+=1;
                        if(i==options.slideLength){i=0};
                        var lie=slideImg.eq(i);
                        lie.siblings().css("z-index",2);
                        lie.css("z-index",3).animate({"opacity":1},150,function(){
                            lie.siblings().css({"opacity":0.1,"z-index":1});
                        })
                        slideBtn.eq(i).addClass(options.elemClass).siblings().removeClass(options.elemClass);
                };

           　　slideBtn.on(options.elemType,function(){
               　　 slideBtn.removeClass(options.elemClass);
                　　$(this).addClass(options.elemClass);
                　　i=$(this).index()-1;
                　　slideImgFun();
               　　 return false;
            })

           return this;
        })

        }
    })(jQuery);

    $(function()
    {
        $("#slideBox").slideCom({
            slideImg:".slideImg li",
            slideBtn:".slideBtn li",
            elemClass:"active",
            elemType:"click",
            times:3000,
            slideLength:$("#slideBox .slideImg li").length
        })
    })

    </script>
</head>
<body>

<div id="slideBox">
    <ul class="slideImg">
        <li  style="z-index: 3;opacity: 1;"> <a href="#" target="_blank" title="" ><img src="images/1.jpg" alt=""  /></a></li>
        <li> <a href="#" target="_blank" title="" style=""><img src="images/2.jpg" alt="" /></a></li>
        <li> <a href="#" target="_blank" title="" style=""><img src="images/3.jpg" alt="" /></a></li>
        <li> <a href="#" target="_blank" title="" style=""><img src="images/4.jpg" alt="" /></a></li>
    </ul>
     <ul class="slideBtn">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
   
</body>
</html>