首页 > 代码库 > 多预览小图焦点轮播插件lrtk

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

 

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