多预览小图焦点轮播插件lrtk

多预览小图焦点轮播插件lrtk

// JavaScript Document

$(document).ready(function(){

    //$('#select_btn li:first').css('border','none');

    if ($('#zSlider').length) {

        zSlider();

        $('#h_sns').find('img').hover(function(){

            $(this).fadeTo(200,0.5);

        }, function(){

            $(this).fadeTo(100,1);

        });

    }

    function zSlider(ID, delay){

        var ID=ID?ID:'#zSlider';

        var delay=delay?delay:5000;

        var currentEQ=0, picnum=$('#picshow_img li').size(), autoScrollFUN;

        $('#select_btn li').eq(currentEQ).addClass('current');

        $('#picshow_img li').eq(currentEQ).show();

        $('#picshow_tx li').eq(currentEQ).show();

        autoScrollFUN=setTimeout(autoScroll, delay);

        function autoScroll(){

            clearTimeout(autoScrollFUN);

            currentEQ++;

            if (currentEQ>picnum-1) currentEQ=0;

            $('#select_btn li').removeClass('current');

            $('#picshow_img li').hide();

            $('#picshow_tx li').hide().eq(currentEQ).slideDown(400);

            $('#select_btn li').eq(currentEQ).addClass('current');

            $('#picshow_img li').eq(currentEQ).show();

            autoScrollFUN = setTimeout(autoScroll, delay);

        }

        $('#picshow').hover(function(){

            clearTimeout(autoScrollFUN);

        }, function(){

            autoScrollFUN = setTimeout(autoScroll, delay);

        });

        $('#select_btn li').hover(function(){

            var picEQ=$('#select_btn li').index($(this));

            if (picEQ==currentEQ) return false;

            currentEQ = picEQ;

            $('#select_btn li').removeClass('current');

            $('#picshow_img li').hide();

            $('#picshow_tx li').hide().eq(currentEQ).slideDown(100);

            $('#select_btn li').eq(currentEQ).addClass('current');

            $('#picshow_img li').eq(currentEQ).show();

            return false;

        });

    };

})

#zSlider{margin:0px auto; overflow:hidden;}

#picshow{position:relative;}

#picshow,#picshow_img{width:440px; height:440px; overflow:hidden;}

#picshow_img ul { padding-left:; margin-bottom:;}

#picshow_img li{width:440px; height:440px; overflow:hidden; float:left; display:none;}

#picshow_img img{width:440px; height:440px;}

#select_btn{color:#111; padding:30px 0;}

#select_btn ul{ padding:0 0 0 45px;}

#select_btn li{height:60px;width:60px;float:left; margin:0 5px; border:1px solid #faf8f0; cursor:pointer;}

#select_btn li:hover{background-color:#fff;}

#select_btn li.current{border: 1px solid #df0023;}

#select_btn li.current:hover{background-color:#fff;}

#select_btn a{color:#000;}

#select_btn img{ float:left; width:60px; height:60px;}

#select_btn .select_text{ height:20px; font:bold 13px/16px 'Microsoft YaHei'; overflow:hidden; display:block;}

#select_btn .select_text:hover{text-decoration:underline;}

#select_btn .select_date{ height:23px; line-height:23px; overflow:hidden; display:block;}

<div id="zSlider">

                                <div id="picshow">

                                    <div id="picshow_img">

                                        <ul class="clearfix">

                                          <li><a href="javascript:void(0)" target="_blank"><img src="data:images/1.jpg"></a></li>

                                          <li><a href="javascript:void(0)" target="_blank"><img src="data:images/2.jpg"></a></li>

                                          <li><a href="javascript:void(0)" target="_blank"><img src="data:images/3.jpg"></a></li>

                                          <li><a href="javascript:void(0)" target="_blank"><img src="data:images/4.jpg"></a></li>

                                          <li><a href="javascript:void(0)" target="_blank"><img src="data:images/5.jpg"></a></li>

                                        </ul>

                                    </div>

                                </div>

                                <div id="select_btn">

                                    <ul>

                                      <li><a href="javascript:void(0)" target="_blank"><img src="data:images/01.jpg"></a></li>

                                      <li><a href="javascript:void(0)" target="_blank"><img src="data:images/02.jpg"></a></li>

                                      <li><a href="javascript:void(0)" target="_blank"><img src="data:images/03.jpg"></a></li>

                                      <li><a href="javascript:void(0)" target="_blank"><img src="data:images/04.jpg"></a></li>

                                      <li><a href="javascript:void(0)" target="_blank"><img src="data:images/05.jpg"></a></li>

                                    </ul>

                                </div>

                            </div>