jquery自己写的带左右箭头自动播放幻灯插件，简化

浏览数：27 / 时间：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}
    .leftRight{ position: absolute; width: 100%; top: 230px; z-index: 100}
    .leftBtn{ float: left; color: #f00;}
    .rightBtn{ float: right;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),
                   leftBtn=_this.find(options.leftBtn),
                   rightBtn=_this.find(options.rightBtn);

                    timer=setInterval(slideImgFun,options.times);
                     _this.hover(function(){
                        clearInterval(timer);
                   },function(){
                        timer=setInterval(slideImgFun,options.times);
                   });

                  var slideImgFun=function(){
                            if(i==-2){i=2}//重点注意
                             i+=1
                            if (i>=options.slideLength) {
                                i=0;
                            } else if (i<0) {
                                i=options.slideLength;
                            }
                            
                        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;
                })

               leftBtn.on(options.elemType,function(){
                    i-=2;
                    slideImgFun();
                     return false;
               })
                rightBtn.on(options.elemType,function(){
                    i+=0;
                    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,
            leftBtn:".leftBtn",
            rightBtn:".rightBtn"
        })
    })

    </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 class="leftRight"><a href="" class="leftBtn">左箭头</a><a href="" class="rightBtn">右箭头</a></div>
</div>
   
</body>
</html>