jQuery幻灯片相册JS效果

0.jpg


使用css样式,我们已经把上图右下角的图标加了上去,但是想要实现控制效果,我们需要使用JS来实现,代码如下

<script type="text/javascript">
    $(function() {
        /**
         * interval : 显示的图像之间的时间
         * current  : 控制当前图像的数量
         * current_thumb : 该指数目前的拇指包装
         * nmb_thumb_wrappers : 拇指包装总数
         * nmb_images_wrapper : 图像的数量在每个包装器
         */
        var interval         = 4000;
        var current          = 0;
        var current_thumb     = 0;
        var nmb_thumb_wrappers = $('#msg_thumbs .msg_thumb_wrapper').length;
        var nmb_images_wrapper  = 6;
        /**
         * 启动幻灯片
         */
        play();
        /**
         * 显示控制时
         * 鼠标移至画面
         */
        slideshowMouseEvent();
        function slideshowMouseEvent(){
            $('#msg_slideshow').unbind('mouseenter')
                    .bind('mouseenter',showControls)
                    .andSelf()
                    .unbind('mouseleave')
                    .bind('mouseleave',hideControls);
        }
        /**
         * 点击网格图标
         * 显示了拇指视图、暂停幻灯片和隐藏控件
         */
        $('#msg_grid').bind('click',function(e){
            hideControls();
            $('#msg_slideshow').unbind('mouseenter').unbind('mouseleave');
            pause();
            $('#msg_thumbs').stop().animate({'top':'0px'},500);
            e.preventDefault();
        });
        /**
         * 关闭拇指视图,
         * 显示控件
         */
        $('#msg_thumb_close').bind('click',function(e){
            showControls();
            slideshowMouseEvent();
            $('#msg_thumbs').stop().animate({'top':'-230px'},500);
            e.preventDefault();
        });
        /**
         * 暂停或播放图标
         */
        $('#msg_pause_play').bind('click',function(e){
            var $this = $(this);
            if($this.hasClass('msg_play'))
                play();
            else
                pause();
            e.preventDefault();
        });
        /**
         * 点击控制下或上一页,
         * 暂停幻灯片,
         * 显示下一个图像
         */
        $('#msg_next').bind('click',function(e){
            pause();
            next();
            e.preventDefault();
        });
        $('#msg_prev').bind('click',function(e){
            pause();
            prev();
            e.preventDefault();
        });
        /**
         * 显示和隐藏控件功能
         */
        function showControls(){
            $('#msg_controls').stop().animate({'right':'15px'},500);
        }
        function hideControls(){
            $('#msg_controls').stop().animate({'right':'-110px'},500);
        }
        /**
         * 启动幻灯片
         */
        function play(){
            next();
            $('#msg_pause_play').addClass('msg_pause').removeClass('msg_play');
            playtime = setInterval(next,interval)
        }
        /**
         * 停止幻灯片
         */
        function pause(){
            $('#msg_pause_play').addClass('msg_play').removeClass('msg_pause');
            clearTimeout(playtime);
        }
        /**
         * 显示下一个图像
         */
        function next(){
            ++current;
            showImage('r');
        }
        /**
         * 显示之前的图像
         */
        function prev(){
            --current;
            showImage('l');
        }
        /**
         * 显示一个图像
         * dir:左或右
         */
        function showImage(dir){
            /**
             * 拇指包装所示,总是包含当前图像的一个
             */
            alternateThumbs();
            /**
             * 将显示在full模式的经验
             */
            var $thumb = $('#msg_thumbs .msg_thumb_wrapper:nth-child('+current_thumb+')')
                    .find('a:nth-child('+ parseInt(current - nmb_images_wrapper*(current_thumb -1)) +')')
                    .find('img');
            if($thumb.length){
                var source = $thumb.attr('alt');
                var $currentImage = $('#msg_wrapper').find('img');
                if($currentImage.length){
                    $currentImage.fadeOut(function(){
                        $(this).remove();
                        $('<img />').load(function(){
                            var $image = $(this);
                            resize($image);
                            $image.hide();
                            $('#msg_wrapper').empty().append($image.fadeIn());
                        }).attr('src',source);
                    });
                }
                else{
                    $('<img />').load(function(){
                        var $image = $(this);
                        resize($image);
                        $image.hide();
                        $('#msg_wrapper').empty().append($image.fadeIn());
                    }).attr('src',source);
                }
            }
            else{ //this is actually not necessary since we have a circular slideshow
                if(dir == 'r')
                    --current;
                else if(dir == 'l')
                    ++current;
                alternateThumbs();
                return;
            }
        }
        /**
         *拇指包装所示,总是包含当前图像的一个
         */
        function alternateThumbs(){
            $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
                    .hide();
            current_thumb = Math.ceil(current/nmb_images_wrapper);
            /**
             * 如果到达最后,重新开开始
             */
            if(current_thumb > nmb_thumb_wrappers){
                current_thumb  = 1;
                current       = 1;
            }
            /**
             * 如果我们点击,则结束
             */
            else if(current_thumb == 0){
                current_thumb  = nmb_thumb_wrappers;
                current       = current_thumb*nmb_images_wrapper;
            }
            $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
                    .show();
        }
        /**
         * 单击下一个或前拇指包装
         */
        $('#msg_thumb_next').bind('click',function(e){
            next_thumb();
            e.preventDefault();
        });
        $('#msg_thumb_prev').bind('click',function(e){
            prev_thumb();
            e.preventDefault();
        });
        function next_thumb(){
            var $next_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb+1)+')');
            if($next_wrapper.length){
                $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
                        .fadeOut(function(){
                            ++current_thumb;
                            $next_wrapper.fadeIn();
                        });
            }
        }
        function prev_thumb(){
            var $prev_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb-1)+')');
            if($prev_wrapper.length){
                $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
                        .fadeOut(function(){
                            --current_thumb;
                            $prev_wrapper.fadeIn();
                        });
            }
        }
        /**
         * 点击一个拇指,显示图像(拇指的alt属性)
         */
        $('#msg_thumbs .msg_thumb_wrapper > a').bind('click',function(e){
            var $this     = $(this);
            $('#msg_thumb_close').trigger('click');
            var idx          = $this.index();
            var p_idx     = $this.parent().index();
            current          = parseInt(p_idx*nmb_images_wrapper + idx + 1);
            showImage();
            e.preventDefault();
        }).bind('mouseenter',function(){
            var $this     = $(this);
            $this.stop().animate({'opacity':1});
        }).bind('mouseleave',function(){
            var $this     = $(this);
            $this.stop().animate({'opacity':0.5});
        });
        /**
         * 调整,以适应图像在容器(400 x 400)
         */
        function resize($image){
            var theImage   = new Image();
            theImage.src   = $image.attr("src");
            var imgwidth   = theImage.width;
            var imgheight  = theImage.height;
            var containerwidth  = 400;
            var containerheight = 400;
            if(imgwidth    > containerwidth){
                var newwidth = containerwidth;
                var ratio = imgwidth / containerwidth;
                var newheight = imgheight / ratio;
                if(newheight > containerheight){
                    var newnewheight = containerheight;
                    var newratio = newheight/containerheight;
                    var newnewwidth =newwidth/newratio;
                    theImage.width = newnewwidth;
                    theImage.height= newnewheight;
                }
                else{
                    theImage.width = newwidth;
                    theImage.height= newheight;
                }
            }
            else if(imgheight > containerheight){
                var newheight = containerheight;
                var ratio = imgheight / containerheight;
                var newwidth = imgwidth / ratio;
                if(newwidth > containerwidth){
                    var newnewwidth = containerwidth;
                    var newratio = newwidth/containerwidth;
                    var newnewheight =newheight/newratio;
                    theImage.height = newnewheight;
                    theImage.width= newnewwidth;
                }
                else{
                    theImage.width = newwidth;
                    theImage.height= newheight;
                }
            }
            $image.css({
                'width'    :theImage.width,
                'height':theImage.height
            });
        }
    });
</script>

提示:对于上面的JS代码,对于新手不需要会写,只要能按照注释看懂会用即可


下面我们把代码融合一下



继续学习
||
<script type="text/javascript"> $(function() { /** * interval : 显示的图像之间的时间 * current : 控制当前图像的数量 * current_thumb : 该指数目前的拇指包装 * nmb_thumb_wrappers : 拇指包装总数 * nmb_images_wrapper : 图像的数量在每个包装器 */ var interval = 4000; var current = 0; var current_thumb = 0; var nmb_thumb_wrappers = $('#msg_thumbs .msg_thumb_wrapper').length; var nmb_images_wrapper = 6; /** * 启动幻灯片 */ play(); /** * 显示控制时 * 鼠标移至画面 */ slideshowMouseEvent(); function slideshowMouseEvent(){ $('#msg_slideshow').unbind('mouseenter') .bind('mouseenter',showControls) .andSelf() .unbind('mouseleave') .bind('mouseleave',hideControls); } /** * 点击网格图标 * 显示了拇指视图、暂停幻灯片和隐藏控件 */ $('#msg_grid').bind('click',function(e){ hideControls(); $('#msg_slideshow').unbind('mouseenter').unbind('mouseleave'); pause(); $('#msg_thumbs').stop().animate({'top':'0px'},500); e.preventDefault(); }); /** * 关闭拇指视图, * 显示控件 */ $('#msg_thumb_close').bind('click',function(e){ showControls(); slideshowMouseEvent(); $('#msg_thumbs').stop().animate({'top':'-230px'},500); e.preventDefault(); }); /** * 暂停或播放图标 */ $('#msg_pause_play').bind('click',function(e){ var $this = $(this); if($this.hasClass('msg_play')) play(); else pause(); e.preventDefault(); }); /** * 点击控制下或上一页, * 暂停幻灯片, * 显示下一个图像 */ $('#msg_next').bind('click',function(e){ pause(); next(); e.preventDefault(); }); $('#msg_prev').bind('click',function(e){ pause(); prev(); e.preventDefault(); }); /** * 显示和隐藏控件功能 */ function showControls(){ $('#msg_controls').stop().animate({'right':'15px'},500); } function hideControls(){ $('#msg_controls').stop().animate({'right':'-110px'},500); } /** * 启动幻灯片 */ function play(){ next(); $('#msg_pause_play').addClass('msg_pause').removeClass('msg_play'); playtime = setInterval(next,interval) } /** * 停止幻灯片 */ function pause(){ $('#msg_pause_play').addClass('msg_play').removeClass('msg_pause'); clearTimeout(playtime); } /** * 显示下一个图像 */ function next(){ ++current; showImage('r'); } /** * 显示之前的图像 */ function prev(){ --current; showImage('l'); } /** * 显示一个图像 * dir:左或右 */ function showImage(dir){ /** * 拇指包装所示,总是包含当前图像的一个 */ alternateThumbs(); /** * 将显示在full模式的经验 */ var $thumb = $('#msg_thumbs .msg_thumb_wrapper:nth-child('+current_thumb+')') .find('a:nth-child('+ parseInt(current - nmb_images_wrapper*(current_thumb -1)) +')') .find('img'); if($thumb.length){ var source = $thumb.attr('alt'); var $currentImage = $('#msg_wrapper').find('img'); if($currentImage.length){ $currentImage.fadeOut(function(){ $(this).remove(); $('<img />').load(function(){ var $image = $(this); resize($image); $image.hide(); $('#msg_wrapper').empty().append($image.fadeIn()); }).attr('src',source); }); } else{ $('<img />').load(function(){ var $image = $(this); resize($image); $image.hide(); $('#msg_wrapper').empty().append($image.fadeIn()); }).attr('src',source); } } else{ //this is actually not necessary since we have a circular slideshow if(dir == 'r') --current; else if(dir == 'l') ++current; alternateThumbs(); return; } } /** *拇指包装所示,总是包含当前图像的一个 */ function alternateThumbs(){ $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')') .hide(); current_thumb = Math.ceil(current/nmb_images_wrapper); /** * 如果到达最后,重新开开始 */ if(current_thumb > nmb_thumb_wrappers){ current_thumb = 1; current = 1; } /** * 如果我们点击,则结束 */ else if(current_thumb == 0){ current_thumb = nmb_thumb_wrappers; current = current_thumb*nmb_images_wrapper; } $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')') .show(); } /** * 单击下一个或前拇指包装 */ $('#msg_thumb_next').bind('click',function(e){ next_thumb(); e.preventDefault(); }); $('#msg_thumb_prev').bind('click',function(e){ prev_thumb(); e.preventDefault(); }); function next_thumb(){ var $next_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb+1)+')'); if($next_wrapper.length){ $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')') .fadeOut(function(){ ++current_thumb; $next_wrapper.fadeIn(); }); } } function prev_thumb(){ var $prev_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb-1)+')'); if($prev_wrapper.length){ $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')') .fadeOut(function(){ --current_thumb; $prev_wrapper.fadeIn(); }); } } /** * 点击一个拇指,显示图像(拇指的alt属性) */ $('#msg_thumbs .msg_thumb_wrapper > a').bind('click',function(e){ var $this = $(this); $('#msg_thumb_close').trigger('click'); var idx = $this.index(); var p_idx = $this.parent().index(); current = parseInt(p_idx*nmb_images_wrapper + idx + 1); showImage(); e.preventDefault(); }).bind('mouseenter',function(){ var $this = $(this); $this.stop().animate({'opacity':1}); }).bind('mouseleave',function(){ var $this = $(this); $this.stop().animate({'opacity':0.5}); }); /** * 调整,以适应图像在容器(400 x 400) */ function resize($image){ var theImage = new Image(); theImage.src = $image.attr("src"); var imgwidth = theImage.width; var imgheight = theImage.height; var containerwidth = 400; var containerheight = 400; if(imgwidth > containerwidth){ var newwidth = containerwidth; var ratio = imgwidth / containerwidth; var newheight = imgheight / ratio; if(newheight > containerheight){ var newnewheight = containerheight; var newratio = newheight/containerheight; var newnewwidth =newwidth/newratio; theImage.width = newnewwidth; theImage.height= newnewheight; } else{ theImage.width = newwidth; theImage.height= newheight; } } else if(imgheight > containerheight){ var newheight = containerheight; var ratio = imgheight / containerheight; var newwidth = imgwidth / ratio; if(newwidth > containerwidth){ var newnewwidth = containerwidth; var newratio = newwidth/containerwidth; var newnewheight =newheight/newratio; theImage.height = newnewheight; theImage.width= newnewwidth; } else{ theImage.width = newwidth; theImage.height= newheight; } } $image.css({ 'width' :theImage.width, 'height':theImage.height }); } }); </script>
提交重置代码