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

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

时间: 2024-08-19 13:21:52

多预览小图焦点轮播插件lrtk的相关文章

KinSlideshow焦点图轮播插件

KinSlideshow默认设置效果代码: *焦点图显示的标题为 img 中 alt 属性中的文字 *当只有一张图片时不显示按钮,但也会有无缝切换效果 * jquery 1.7.2以上版本 jvascript: $(function(){ $("#KinSlideshow").KinSlideshow(); }) HTML: <div id="KinSlideshow" style="visibility:hidden;"> <

Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:? 16个独特的过渡效果? 简洁和有效的标记? 加载参数设置?

jQuery+html5实现的3D动态切换焦点轮播幻灯片

今天爱编程给网友们分享一款基于jQuery+html5实现的3D动态切换焦点轮播幻灯片,支持左右箭头和圆点按钮播放控制,支持多种不同的3D动态切换特效,自适应全屏显示,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗,不支持IE8及以下浏览器.横向全屏显示,效果图如下: 在线预览   源码下载 实现的代码. 该幻灯片基于jquery,所以要引用jquery库,另个还有两个js库分别是html5zoo.js和lovelygallery.js.这些js在实例下

12款经典的白富美型—jquery图片轮播插件—前端开发必备

图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ?  16个独特的过渡效果?

图片轮播插件FlexSlider

推荐一款万能图片轮播插件FlexSlider 先来看一下都能做出什么效果吧 轮播图方向控制按钮和底部的焦点按钮都是可以控制显示和隐藏,最厉害的一点是该插件支持手机触屏 具体参数设置当然还是github更权威https://github.com/woothemes/FlexSlider/ 友情提示:在github上下载的demo由于用的是google的CDN,由于google被墙可能导致无法运行,建议更改jQuery的调用地址 最后看一下支付宝官方网站上的对该插件的应用效果图

JQuery插件之图片轮播插件–slideBox

来源:http://www.ido321.com/852.html 今天偶然发现了一个比較好用的图片轮播插件-slideBox 先看看效果:http://slidebox.sinaapp.com/ 代码例如以下 1: <!doctype html> 2: <html> 3: <head> 4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

图片轮播插件的设计抽象

提出需求首页的轮播焦点图是个常见的需求.需求是这样子的1 每隔2秒切换一次图片2 切换图片的时候,会对应显示该图片的说明3 切换图片的时候,对应显示图片处于小按钮中的第几个,点击小按钮时跳到对应的大图4 自动滚动图片,鼠标放到图片区域时,停止滚动,移出时继续5 点击左右可以上下切换图片对于做一个图片轮播并不难,按照要求,写代码就行.而如何设计一个通用的图片轮播组件确实需要好好思考.因为样式是不确定的,同时html结构也是不确定的.所以问改如何设计这个轮播js呢? 使用插件?我是反插件的,除非插件

jquery实现轮播插件

这几天用jquery写了两个轮播的插件,功能很简单.第一次尝试写插件,有很多不足的地方,代码如下: 注:图片链接请替换掉,配置信息必须加上图片width和height. <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" hr

关于焦点轮播图的总结

目前来讲,在各大网站都会使用到焦点轮播图,因为它占用地方少,交互性好,是前端设计必须要掌握的技能之一. 原理:使用三层嵌套,最里层装载图片,图片需要浮动.最里层设置相对定位.然后再使用JavaScript设置一个定时器,每过一段时间便让最里层的块的left值改变. 而第二层则需要设置overflow:hidden:这个属性,否则将会导致这个层被子层撑大.不美观. 此图便为实现效果图. 下面先讲一讲如何布局. 首先布局分为三大块,一块为inner,包裹住所有的图片:一块为outer,决定展示的窗口