jQuery slideshow album JS effect

Using css style, we have added the icon in the lower right corner of the above picture, but to achieve the control effect, we need Use JS to implement, the code is as follows

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

Tips: For the above JS code, novices do not need to be able to write it, as long as they can understand it according to the comments and use it

Let’s fuse the code