jQuery 슬라이드쇼 앨범 JS 효과

Css 스타일을 사용하여 위 그림의 오른쪽 하단에 아이콘을 추가했지만 제어 효과를 얻으려면 JS를 사용하여 구현해야 합니다. Follow

<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: 위의 JS 코드는 초보자도 작성할 필요가 없습니다. 댓글에 따라 이해하고 사용할 수 있으면 됩니다.

이제 코드를 통합해 봅시다