码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-11-13 16:14:12      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   io   color   ar   os   sp   

<!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>

 

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

标签:des   style   blog   http   io   color   ar   os   sp   

原文地址:http://www.cnblogs.com/boyzi/p/4095100.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!