轮播图只能点击最后一个连接，其他的不跟随轮播点击

Question

 <script type="text/javascript">

;(function($){

$.fn.lubo=function(options){

var defaults={

}

var options=$.extend(defaults,options);

return this.each(function(){

var _lubo=jQuery('.lubo');

var _box=jQuery('.lubo_box');

var _this=jQuery(this);  

var luboHei=_box.height();

var Over='mouseover';

var Out='mouseout';

var Click='click';

var Li="li";

var _cirBox='.cir_box';

var cirOn='cir_on';

var _cirOn='.cir_on';

var cirlen=_box.children(Li).length; 



var luboTime=2000; 



var switchTime=400;

cir();



Btn();





function cir(){



_lubo.append('<ul class="cir_box"></ul>');



var cir_box=jQuery('.cir_box');



for(var i=0; i<cirlen;i++){



cir_box.append('<li style="" value="'+i+'"></li>');

}



var cir_dss=cir_box.width();



cir_box.css({



left:'50%',



marginLeft:-cir_dss/2,



bottom:'0' 



});



cir_box.children(Li).eq(0).addClass(cirOn);



function Btn(){



_lubo.append('<div class="lubo_btn"></div>');



var _btn=jQuery('.lubo_btn');



_btn.append('<div class="left_btn"><</div><div class="right_btn">></div>');



var leftBtn=jQuery('.left_btn');



var rightBtn=jQuery('.right_btn');



leftBtn.bind(Click,function(){



var cir_box=jQuery(_cirBox);



var onLen=jQuery(_cirOn).val();



_box.children(Li).eq(onLen).stop(false,false).animate({



opacity:0



},switchTime);



if(onLen==0){



onLen=cirlen;



}



_box.children(Li).eq(onLen-1).stop(false,false).animate({



opacity:1



},switchTime);

cir_box.children(Li).eq(onLen-1).addClass(cirOn).siblings().removeClass(cirOn);



})



rightBtn.bind(Click,function(){



var cir_box=jQuery(_cirBox);



var onLen=jQuery(_cirOn).val();



_box.children(Li).eq(onLen).stop(false,false).animate({



opacity:0



},switchTime);



if(onLen==cirlen-1){



onLen=-1;



}



_box.children(Li).eq(onLen+1).stop(false,false).animate({



opacity:1



},switchTime);

cir_box.children(Li).eq(onLen+1).addClass(cirOn).siblings().removeClass(cirOn);



})

}



int=setInterval(clock,luboTime);



function clock(){



var cir_box=jQuery(_cirBox);



var onLen=jQuery(_cirOn).val();



_box.children(Li).eq(onLen).stop(false,false).animate({



opacity:0



},switchTime);



if(onLen==cirlen-1){



onLen=-1;



}



_box.children(Li).eq(onLen+1).stop(false,false).animate({



opacity:1



},switchTime);

cir_box.children(Li).eq(onLen+1).addClass(cirOn).siblings().removeClass(cirOn);

}

_lubo.bind(Over,function(){



clearTimeout(int);



});



_lubo.bind(Out,function(){



int=setInterval(clock,luboTime);



});



jQuery(_cirBox).children(Li).bind(Over,function(){



var inde = jQuery(this).index();



jQuery(this).addClass(cirOn).siblings().removeClass(cirOn);



_box.children(Li).stop(false,false).animate({



opacity:0



},switchTime);



_box.children(Li).eq(inde).stop(false,false).animate({



opacity:1



},switchTime);



});





});



}

})(jQuery);





<script type="text/javascript">



 $(function(){



     $(".lubo").lubo({



     });



 })



 </script>

<div class="lubo">

  <ul class="lubo_box">

     <li style=" opacity: 1;filter:alpha(opacity=100);"><a href=""><img src="1.jpeg"></a></li>

     <li><a href="2.html"><img src="2.jpeg"></a></li>

    <li><a href="2.html"><img src="3.jpeg"></a></li>

    <li><a href="2.html"><img src="4.jpeg"></a></li>

     <li><a href="2.html"><img src="5.jpeg"></a></li>

     <li><a href="2.html"><img src="2.jpeg"></a></li>

     <li><a href="2.html"><img src="3.jpeg"></a></li>

     <li><a href="2.html"><img src="4.jpeg"></a></li>

     <li><a href="1.html"><img src="5.jpeg"></a></li>

   </ul>

 </div>

Answer 1

//代码分隔有些问题，帮你调整了一下，应该可以了，注意css样式要添加进去，我下面简单写了一个样式，替换成你自己的
<script type="text/javascript" src="http://www.srcfans.com/js/jquery-1.9.1.min.js"></script>
<style>
    .lubo_box li{
        float:left;
        margin-left:20px;
    }
</style>
<script type="text/javascript">

(function($){

$.fn.lubo=function(options){

    var defaults={

    }

    var options=$.extend(defaults,options);

    return this.each(function(){

        var _lubo=jQuery('.lubo');

        var _box=jQuery('.lubo_box');

        var _this=jQuery(this);  

        var luboHei=_box.height();

        var Over='mouseover';

        var Out='mouseout';

        var Click='click';

        var Li="li";

        var _cirBox='.cir_box';

        var cirOn='cir_on';

        var _cirOn='.cir_on';

        var cirlen=_box.children(Li).length; 



        var luboTime=1000; 



        var switchTime=400;

        cir();

        Btn();
        function cir(){

            _lubo.append('<ul class="cir_box"></ul>');

            var cir_box=jQuery('.cir_box');

            for(var i=0; i<cirlen;i++){
            cir_box.append('<li style="" value="'+i+'"></li>');
            }

            var cir_dss=cir_box.width();

            cir_box.css({
                left:'50%',

                marginLeft:-cir_dss/2,
                bottom:'0' 
            });
            cir_box.children(Li).eq(0).addClass(cirOn);

        }

        function Btn(){

            _lubo.append('<div class="lubo_btn"></div>');

            var _btn=jQuery('.lubo_btn');

            _btn.append('<div class="left_btn"><</div><div class="right_btn">></div>');

            var leftBtn=jQuery('.left_btn');

            var rightBtn=jQuery('.right_btn');

            leftBtn.bind(Click,function(){

                var cir_box=jQuery(_cirBox);

                var onLen=jQuery(_cirOn).val();

                _box.children(Li).eq(onLen).stop(false,false).animate({

                    opacity:0

                },switchTime);



                if(onLen==0){

                    onLen=cirlen;

                }



                _box.children(Li).eq(onLen-1).stop(false,false).animate({

                    opacity:1

                },switchTime);

                cir_box.children(Li).eq(onLen-1).addClass(cirOn).siblings().removeClass(cirOn);



            })



            rightBtn.bind(Click,function(){

                var cir_box=jQuery(_cirBox);

                var onLen=jQuery(_cirOn).val();

                _box.children(Li).eq(onLen).stop(false,false).animate({

                    opacity:0

                },switchTime);

                if(onLen==cirlen-1){

                    onLen=-1;

                }

                _box.children(Li).eq(onLen+1).stop(false,false).animate({

                    opacity:1

                },switchTime);

                cir_box.children(Li).eq(onLen+1).addClass(cirOn).siblings().removeClass(cirOn);

            })

        }



        int=setInterval(clock,luboTime);



        function clock(){

            var cir_box=jQuery(_cirBox);

            var onLen=jQuery(_cirOn).val();

            _box.children(Li).eq(onLen).stop(false,false).animate({

                opacity:0

            },switchTime);

            if(onLen==cirlen-1){

                onLen=-1;

            }
            _box.children(Li).eq(onLen+1).stop(false,false).animate({

            opacity:1

            },switchTime);

            cir_box.children(Li).eq(onLen+1).addClass(cirOn).siblings().removeClass(cirOn);

        }

        _lubo.bind(Over,function(){
            clearTimeout(int);
        });



        _lubo.bind(Out,function(){
            int=setInterval(clock,luboTime);
        });



        jQuery(_cirBox).children(Li).bind(Over,function(){

            var inde = jQuery(this).index();

            jQuery(this).addClass(cirOn).siblings().removeClass(cirOn);

            _box.children(Li).stop(false,false).animate({

                opacity:0

            },switchTime);

            _box.children(Li).eq(inde).stop(false,false).animate({

            opacity:1

            },switchTime);

        });

});
}

})(jQuery);

 $(function(){
        $(".lubo").lubo({});
 })
 </script>

<div class="lubo">

    <ul class="lubo_box">

        <li style=" opacity: 1;filter:alpha(opacity=100);"><a href=""><img src="1.jpeg"></a></li>

        <li><a href="2.html"><img src="2.jpeg"></a></li>

        <li><a href="2.html"><img src="3.jpeg"></a></li>

        <li><a href="2.html"><img src="4.jpeg"></a></li>

        <li><a href="2.html"><img src="5.jpeg"></a></li>

        <li><a href="2.html"><img src="2.jpeg"></a></li>

        <li><a href="2.html"><img src="3.jpeg"></a></li>

        <li><a href="2.html"><img src="4.jpeg"></a></li>

        <li><a href="1.html"><img src="5.jpeg"></a></li>

    </ul>

 </div>