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

Posted 2020-08-13 知兮

多预览小图焦点轮播插件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;
        });
    };
})

View Code

#zSlider{margin:0px auto; overflow:hidden;}
#picshow{position:relative;}
#picshow,#picshow_img{width:440px; height:440px; overflow:hidden;}
#picshow_img ul { padding-left:0; margin-bottom:0;}
#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;}

View Code

<div id="zSlider">
                                <div id="picshow">
                                    <div id="picshow_img">
                                        <ul class="clearfix">
                                          <li><a href="javascript:void(0)" target="_blank"><img src="images/1.jpg"></a></li>
                                          <li><a href="javascript:void(0)" target="_blank"><img src="images/2.jpg"></a></li>
                                          <li><a href="javascript:void(0)" target="_blank"><img src="images/3.jpg"></a></li>
                                          <li><a href="javascript:void(0)" target="_blank"><img src="images/4.jpg"></a></li>
                                          <li><a href="javascript:void(0)" target="_blank"><img src="images/5.jpg"></a></li>
                                          
                                        </ul>
                                    </div>
                                    
                                </div>
                                <div id="select_btn">
                                    <ul>
                                      <li><a href="javascript:void(0)" target="_blank"><img src="images/01.jpg"></a></li>
                                      <li><a href="javascript:void(0)" target="_blank"><img src="images/02.jpg"></a></li>
                                      <li><a href="javascript:void(0)" target="_blank"><img src="images/03.jpg"></a></li>
                                      <li><a href="javascript:void(0)" target="_blank"><img src="images/04.jpg"></a></li>
                                      <li><a href="javascript:void(0)" target="_blank"><img src="images/05.jpg"></a></li>
                                     
                                    </ul>
                                </div>    
                            </div>

View Code