将全屏图库导航更改为项目符号导航

Question

我是一个修改 jQuery 的菜鸟，并且已经成功地完成了一些奇怪的简单代码，但修改这个画廊对我来说是一项更大的任务：http://buildinternet.com/project/supersized/ - 当前使用下一个/上一个按钮和数字计数器，例如 1/3、2/3 等...

我需要只需将数字计数器更改为项目符号计数器即可在 http://wowslider.com/ 等滑块上。

我修改了 jquery 并尝试了一些东西，但变化可能比我预期的要多得多。有什么提示或技巧可以让我继续下去吗？

这是实际的 JS：

(function($){

//Add in Supersized elements
$(document).ready(function() {
    $('body').prepend('<div id="supersized-loader"></div>').prepend('<div id="supersized"></div>');
});

//Resize image on ready or resize
$.supersized = function( options ) {

    //Default settings
    var settings = {

        //Functionality
        slideshow               :   1,      //Slideshow on/off
        autoplay                :   1,      //Slideshow starts playing automatically
        start_slide             :   1,      //Start slide (0 is random)
        slide_interval          :   5000,   //Length between transitions
        transition              :   1,      //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
        transition_speed        :   750,    //Speed of transition
        new_window              :   1,      //Image links open in new window/tab
        pause_hover             :   0,      //Pause slideshow on hover
        keyboard_nav            :   1,      //Keyboard navigation on/off
        performance             :   1,      //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
        image_protect           :   1,      //Disables image dragging and right click with Javascript
        image_path              :   'img/', //Default image path

        //Size & Position
        min_width               :   0,      //Min width allowed (in pixels)
        min_height              :   0,      //Min height allowed (in pixels)
        vertical_center         :   1,      //Vertically center background
        horizontal_center       :   1,      //Horizontally center background
        fit_portrait            :   0,      //Portrait images will not exceed browser height
        fit_landscape           :   0,      //Landscape images will not exceed browser width  

        //Components
        navigation              :   1,      //Slideshow controls on/off
        thumbnail_navigation    :   0,      //Thumbnail navigation
        slide_counter           :   1,      //Display slide numbers
        slide_captions          :   1       //Slide caption (Pull from "title" in slides array)

    };

    //Default elements
    var element = $('#supersized');     //Supersized container
    var pauseplay = '#pauseplay';       //Pause/Play

    //Combine options with default settings
    if (options) {
        var options = $.extend(settings, options);  //Pull from both defaults and supplied options
    }else{
        var options = $.extend(settings);           //Only pull from default settings       
    }

    //General slideshow variables
    var inAnimation = false;                    //Prevents animations from stacking
    var isPaused = false;                       //Tracks paused on/off
    var image_path = options.image_path;        //Default image path for navigation control buttons

    //Determine starting slide (random or defined)
    if (options.start_slide){
        var currentSlide = options.start_slide - 1; //Default to defined start slide
    }else{
        var currentSlide = Math.floor(Math.random()*options.slides.length); //Generate random slide number
    }

    //If links should open in new window
    var linkTarget = options.new_window ? ' target="_blank"' : '';

    //Set slideshow quality (Supported only in FF and IE, no Webkit)
    if (options.performance == 3){
        element.addClass('speed');      //Faster transitions
    } else if ((options.performance == 1) || (options.performance == 2)){
        element.addClass('quality');    //Higher image quality
    }


    /***Load initial set of images***/

    if (options.slides.length > 1){
        //Set previous image
        currentSlide - 1 < 0  ? loadPrev = options.slides.length - 1 : loadPrev = currentSlide - 1; //If slide is 1, load last slide as previous
        var imageLink = (options.slides[loadPrev].url) ? "href='" + options.slides[loadPrev].url + "'" : "";
        $("<img/>").attr("src", options.slides[loadPrev].image).appendTo(element).wrap('<a ' + imageLink + linkTarget + '></a>');
    }

    //Set current image
    imageLink = (options.slides[currentSlide].url) ? "href='" + options.slides[currentSlide].url + "'" : "";
    $("<img/>").attr("src", options.slides[currentSlide].image).appendTo(element).wrap('<a class="activeslide" ' + imageLink + linkTarget + '></a>');

    if (options.slides.length > 1){
        //Set next image
        currentSlide == options.slides.length - 1 ? loadNext = 0 : loadNext = currentSlide + 1; //If slide is last, load first slide as next
        imageLink = (options.slides[loadNext].url) ? "href='" + options.slides[loadNext].url + "'" : "";
        $("<img/>").attr("src", options.slides[loadNext].image).appendTo(element).wrap('<a ' + imageLink + linkTarget + '></a>');
    }
    /***End load initial images***/

    element.hide();                 //Hide image to be faded in
    $('#controls-wrapper').hide();  //Hide controls to be displayed

    $(window).load(function(){

        $('#supersized-loader').hide();     //Hide loading animation
        element.fadeIn('fast');             //Fade in background
        $('#controls-wrapper').show();      //Display controls

        //Display thumbnails
        if (options.thumbnail_navigation){

            //Load previous thumbnail
            currentSlide - 1 < 0  ? prevThumb = options.slides.length - 1 : prevThumb = currentSlide - 1;
            $('#prevthumb').show().html($("<img/>").attr("src", options.slides[prevThumb].image));

            //Load next thumbnail
            currentSlide == options.slides.length - 1 ? nextThumb = 0 : nextThumb = currentSlide + 1;
            $('#nextthumb').show().html($("<img/>").attr("src", options.slides[nextThumb].image));

        }

        resizenow();    //Resize background image

        if (options.slide_captions) $('#slidecaption').html(options.slides[currentSlide].title);        //Pull caption from array
        if (!(options.navigation)) $('#navigation').hide(); //Display navigation


        //Start slideshow if enabled
        if (options.slideshow && options.slides.length > 1){

            if (options.slide_counter){ //Initiate slide counter if active

                $('#slidecounter .slidenumber').html(currentSlide + 1);     //Pull initial slide number from options        
                $('#slidecounter .totalslides').html(options.slides.length);    //Pull total from length of array

            }

            slideshow_interval = setInterval(nextslide, options.slide_interval);    //Initiate slide interval

            //Prevent slideshow if autoplay disabled
            if (!(options.autoplay)){

                clearInterval(slideshow_interval);  //Stop slideshow
                isPaused = true;    //Mark as paused

                if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "play_dull.png");   //If pause play button is image, swap src

            }

            //Thumbnail Navigation
            if (options.thumbnail_navigation){

                //Next thumbnail clicked
                $('#nextthumb').click(function() {

                    if(inAnimation) return false;       //Abort if currently animating

                    clearInterval(slideshow_interval);  //Stop slideshow
                    nextslide(element, options);        //Go to next slide
                    if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval);    //If not paused, resume slideshow

                    return false;

                });

                //Previous thumbnail clicked
                $('#prevthumb').click(function() {

                    if(inAnimation) return false;       //Abort if currently animating

                    clearInterval(slideshow_interval);  //Stop slideshow
                    prevslide(element, options);        //Go to previous slide
                    if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval);    //If not paused, resume slideshow

                    return false;

                });

            }

            //Navigation controls
            if (options.navigation){

                $('#navigation a').click(function(){  
                    $(this).blur();  
                    return false;  
                });

                //Next button clicked
                $('#nextslide').click(function() {

                    if(inAnimation) return false;       //Abort if currently animating

                    clearInterval(slideshow_interval);  //Stop slideshow
                    nextslide();        //Go to next slide
                    if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval);    //If not paused, resume slideshow

                    return false;

                });

                //If next slide button is image
                if ($('#nextslide').attr('src')){

                    $('#nextslide').mousedown(function() {
                        $(this).attr("src", image_path + "arrow_right_active.png");
                    });
                    $('#nextslide').mouseup(function() {
                        $(this).attr("src", image_path + "arrow_right_inactive.png");
                    });
                    $('#nextslide').mouseout(function() {
                        $(this).attr("src", image_path + "arrow_right_inactive.png");
                    });

                }

                //Previous button clicked
                $('#prevslide').click(function() {

                    if(inAnimation) return false;       //Abort if currently animating

                    clearInterval(slideshow_interval);  //Stop slideshow
                    prevslide();        //Go to previous slide
                    if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval);    //If not paused, resume slideshow

                    return false;

                });

                //If previous slide button is image
                if ($('#prevslide').attr('src')){

                    $('#prevslide').mousedown(function() {
                        $(this).attr("src", image_path + "arrow_left_active.png");
                    });
                    $('#prevslide').mouseup(function() {
                        $(this).attr("src", image_path + "arrow_left_inactive.png");
                    });
                    $('#prevslide').mouseout(function() {
                        $(this).attr("src", image_path + "arrow_left_inactive.png");
                    });

                }

                //Pause/play element clicked
                $(pauseplay).click(function() {

                    if(inAnimation) return false;       //Abort if currently animating

                    if (isPaused){

                        if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "pause_dull.png");  //If image, swap to pause

                        //Resume slideshow
                        isPaused = false;
                        slideshow_interval = setInterval(nextslide, options.slide_interval);

                    }else{

                        if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "play_dull.png");   //If image, swap to play

                        //Stop slideshow
                        clearInterval(slideshow_interval);  
                        isPaused = true;

                    }

                    return false;

                });

            }   //End navigation controls

        }   //End slideshow options

    });     //End window load

    //Keyboard Navigation
    if (options.keyboard_nav){

        $(document.documentElement).keydown(function (event) {

            if ((event.keyCode == 37) || (event.keyCode == 40)) { //Left Arrow or Down Arrow

                if ($('#prevslide').attr('src')) $('#prevslide').attr("src", image_path + "arrow_left_active.png");     //If image, change back button to active

            } else if ((event.keyCode == 39) || (event.keyCode == 38)) { //Right Arrow or Up Arrow

                if ($('#nextslide').attr('src')) $('#nextslide').attr("src", image_path + "arrow_right_active.png");    //If image, change next button to active

            }

        });

        $(document.documentElement).keyup(function (event) {

            clearInterval(slideshow_interval);  //Stop slideshow, prevent buildup

            if ((event.keyCode == 37) || (event.keyCode == 40)) { //Left Arrow or Down Arrow

                if ($('#prevslide').attr('src')) $('#prevslide').attr("src", image_path + "arrow_left_inactive.png");   //If image, change back button to normal

                if(inAnimation) return false;       //Abort if currently animating

                clearInterval(slideshow_interval);  //Stop slideshow
                prevslide();        //Go to previous slide

                if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval);    //If not paused, resume slideshow

                return false;

            } else if ((event.keyCode == 39) || (event.keyCode == 38)) { //Right Arrow or Up Arrow

                if ($('#nextslide').attr('src')) $('#nextslide').attr("src", image_path + "arrow_right_inactive.png");  //If image, change next button to normal

                if(inAnimation) return false;       //Abort if currently animating

                clearInterval(slideshow_interval);  //Stop slideshow
                nextslide();        //Go to next slide

                if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval);    //If not paused, resume slideshow

                return false;

            } else if (event.keyCode == 32) { //Spacebar

                if(inAnimation) return false;       //Abort if currently animating

                if (isPaused){

                    if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "pause_dull.png");  //If image, swap to pause

                    //Resume slideshow
                    isPaused = false;
                    slideshow_interval = setInterval(nextslide, options.slide_interval);

                }else{

                    if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "play_dull.png");   //If image, swap to play

                    //Mark as paused
                    isPaused = true;

                }

                return false;
            }

        });
    }


    //Pause when hover on image
    if (options.slideshow && options.pause_hover){
        $(element).hover(function() {

            if(inAnimation) return false;       //Abort if currently animating

                if(!(isPaused) && options.navigation){

                    if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "pause.png");   //If image, swap to pause
                    clearInterval(slideshow_interval);

                }

        }, function() {

            if(!(isPaused) && options.navigation){

                if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "pause_dull.png");  //If image, swap to active
                slideshow_interval = setInterval(nextslide, options.slide_interval);

            }

        });
    }


    //Adjust image when browser is resized
    $(window).resize(function(){
        resizenow();
    });


    //Adjust image size
    function resizenow() {
        return element.each(function() {

            var t = $('img', element);

            //Resize each image seperately
            $(t).each(function(){
                var ratio = ($(this).height()/$(this).width()).toFixed(2);  //Define image ratio

                //Gather browser size
                var browserwidth = $(window).width();
                var browserheight = $(window).height();
                var offset;

                //Resize image to proper ratio
                if ((browserheight > options.min_height) || (browserwidth > options.min_width)){    //If window larger than minimum height or width

                    if ((browserheight/browserwidth) > ratio){

                        if (options.fit_landscape && ratio <= 1){   //If landscapes are set to fit
                            $(this).width(browserwidth);
                            $(this).height(browserwidth * ratio);
                        }else{                                      //Otherwise handle normally
                            $(this).height(browserheight);
                            $(this).width(browserheight / ratio);
                        }

                    } else {

                        if (options.fit_portrait && ratio > 1){ //If portraits are set to fit
                            $(this).height(browserheight);
                            $(this).width(browserheight / ratio);
                        }else{                                      //Otherwise handle normally
                            $(this).width(browserwidth);
                            $(this).height(browserwidth * ratio);
                        }

                    }   //End dynamic resizing

                }   //End minimum size check

                //Horizontally Center
                if (options.horizontal_center){
                    $(this).css('left', (browserwidth - $(this).width())/2);
                }

                //Vertically Center
                if (options.vertical_center){
                    $(this).css('top', (browserheight - $(this).height())/2);
                }

            });

            //Basic image drag and right click protection
            if (options.image_protect){

                $('img', element).bind("contextmenu",function(){
                    return false;
                });
                $('img', element).bind("mousedown",function(){
                    return false;
                });

            }

            return false;

        });
    };


    //Next slide
    function nextslide() {

        if(inAnimation) return false;       //Abort if currently animating
            else inAnimation = true;        //Otherwise set animation marker

        var slides = options.slides;    //Pull in slides array

        var currentslide = element.find('.activeslide');        //Find active slide
        currentslide.removeClass('activeslide');                //Remove active class

        if ( currentslide.length == 0 ) currentslide = element.find('a:last');  //If end of set, note this is last slide
        var nextslide = currentslide.next().length ? currentslide.next() : element.find('a:first');
        var prevslide = nextslide.prev().length ? nextslide.prev() : element.find('a:last');

        //Update previous slide
        $('.prevslide').removeClass('prevslide');
        prevslide.addClass('prevslide');

        //Get the slide number of new slide
        currentSlide + 1 == slides.length ? currentSlide = 0 : currentSlide++;

        //If hybrid mode is on drop quality for transition
        if (options.performance == 1) element.removeClass('quality').addClass('speed'); 

        /**** Image Loading ****/

        //Load next image
        loadSlide = false;

        currentSlide == slides.length - 1 ? loadSlide = 0 : loadSlide = currentSlide + 1;   //Determine next slide
        imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : "";  //If link exists, build it
        $("<img/>").attr("src", options.slides[loadSlide].image).appendTo(element).wrap("<a " + imageLink + linkTarget + "></a>");  //Append new image

        //Update thumbnails (if enabled)
        if (options.thumbnail_navigation == 1){

            //Load previous thumbnail
            currentSlide - 1 < 0  ? prevThumb = slides.length - 1 : prevThumb = currentSlide - 1;
            $('#prevthumb').html($("<img/>").attr("src", options.slides[prevThumb].image));

            //Load next thumbnail
            nextThumb = loadSlide;
            $('#nextthumb').html($("<img/>").attr("src", options.slides[nextThumb].image));

        }

        currentslide.prev().remove(); //Remove Old Image

        /**** End Image Loading ****/


        //Update slide number
        if (options.slide_counter){
            $('#slidecounter .slidenumber').html(currentSlide + 1);
        }

        //Update captions
        if (options.slide_captions){
            (options.slides[currentSlide].title) ? $('#slidecaption').html(options.slides[currentSlide].title) : $('#slidecaption').html('');
        }

        nextslide.hide().addClass('activeslide');   //Update active slide

        switch(options.transition){

            case 0:    //No transition
                nextslide.show(); inAnimation = false;
                break;
            case 1:    //Fade
                nextslide.fadeTo(options.transition_speed, 1, function(){ afterAnimation(); });
                break;
            case 2:    //Slide Top
                nextslide.animate({top : -$(window).height()}, 0 ).show().animate({ top:0 }, options.transition_speed, function(){ afterAnimation(); });
                break;
            case 3:    //Slide Right
                nextslide.animate({left : $(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
                break;
            case 4:    //Slide Bottom
                nextslide.animate({top : $(window).height()}, 0 ).show().animate({ top:0 }, options.transition_speed, function(){ afterAnimation(); });
                break;
            case 5:    //Slide Left
                nextslide.animate({left : -$(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
                break;
            case 6:    //Carousel Right
                nextslide.animate({left : $(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
                currentslide.animate({ left: -$(window).width() }, options.transition_speed );
                break;
            case 7:    //Carousel Left
                nextslide.animate({left : -$(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
                currentslide.animate({ left: $(window).width() }, options.transition_speed );
                break;
        };



    }


    //Previous Slide
    function prevslide() {

        if(inAnimation) return false;       //Abort if currently animating
            else inAnimation = true;        //Otherwise set animation marker

        var slides = options.slides;    //Pull in slides array

        var currentslide = element.find('.activeslide');        //Find active slide
        currentslide.removeClass('activeslide');                //Remove active class

        if ( currentslide.length == 0 ) currentslide = $(element).find('a:first');  //If end of set, note this is first slide
        var nextslide =  currentslide.prev().length ? currentslide.prev() : $(element).find('a:last');
        var prevslide =  nextslide.next().length ? nextslide.next() : $(element).find('a:first');

        //Update previous slide
        $('.prevslide').removeClass('prevslide');
        prevslide.addClass('prevslide');

        //Get current slide number
        currentSlide == 0 ?  currentSlide = slides.length - 1 : currentSlide-- ;

        //If hybrid mode is on drop quality for transition
        if (options.performance == 1) element.removeClass('quality').addClass('speed'); 

        /**** Image Loading ****/

        //Load next image
        loadSlide = false;

        currentSlide - 1 < 0  ? loadSlide = slides.length - 1 : loadSlide = currentSlide - 1;   //Determine next slide
        imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : "";  //If link exists, build it
        $("<img/>").attr("src", options.slides[loadSlide].image).prependTo(element).wrap("<a " + imageLink + linkTarget + "></a>"); //Append new image

        //Update thumbnails (if enabled)
        if (options.thumbnail_navigation == 1){

            //Load previous thumbnail
            prevThumb = loadSlide;
            $('#prevthumb').html($("<img/>").attr("src", options.slides[prevThumb].image));

            //Load next thumbnail
            currentSlide == slides.length - 1 ? nextThumb = 0 : nextThumb = currentSlide + 1;
            $('#nextthumb').html($("<img/>").attr("src", options.slides[nextThumb].image));
        }

        currentslide.next().remove(); //Remove Old Image

        /**** End Image Loading ****/


        //Update slide counter
        if (options.slide_counter){
            $('#slidecounter .slidenumber').html(currentSlide + 1);
        }

        //Update captions
        if (options.slide_captions){
            (options.slides[currentSlide].title) ? $('#slidecaption').html(options.slides[currentSlide].title) : $('#slidecaption').html('');
        }

        nextslide.hide().addClass('activeslide');   //Update active slide

        switch(options.transition){

            case 0:    //No transition
                nextslide.show(); inAnimation = false;
                break;
            case 1:    //Fade
                nextslide.fadeTo(options.transition_speed, 1, function(){ afterAnimation(); });
                break;
            case 2:    //Slide Top (reverse)
                nextslide.animate({top : $(window).height()}, 0 ).show().animate({ top:0 }, options.transition_speed, function(){ afterAnimation(); });
                break;
            case 3:    //Slide Right (reverse)
                nextslide.animate({left : -$(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
                break;
            case 4:    //Slide Bottom (reverse)
                nextslide.animate({top : -$(window).height()}, 0 ).show().animate({ top:0 }, options.transition_speed, function(){ afterAnimation(); });
                break;
            case 5:    //Slide Left (reverse)
                nextslide.animate({left : $(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
                break;
            case 6:    //Carousel Right (reverse)
                nextslide.animate({left : -$(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
                currentslide.animate({ left: $(window).width() }, options.transition_speed );
                break;
            case 7:    //Carousel Left (reverse)
                nextslide.animate({left : $(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
                currentslide.animate({ left: -$(window).width() }, options.transition_speed );
                break;  
        };

    }

    //After slide animation
    function afterAnimation() {

        inAnimation = false; 

        //If hybrid mode is on swap back to higher image quality
        if (options.performance == 1){
            element.removeClass('speed').addClass('quality');
        }

        resizenow();

    }

};

})(jQuery);

在 HEAD

<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" /> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script type="text/javascript" src="js/supersized.3.1.1.min.js"></script> 

    <script type="text/javascript">  

        jQuery(function($){
            $.supersized({

                //Functionality
                slideshow               :   1,      //Slideshow on/off
                autoplay                :   1,      //Slideshow starts playing automatically
                start_slide             :   1,      //Start slide
                slide_interval          :   3000,   //Length between transitions
                transition              :   1,      //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   500,    //Speed of transition
                new_window              :   1,      //Image links open in new window/tab
                pause_hover             :   0,      //Pause slideshow on hover
                keyboard_nav            :   1,      //Keyboard navigation on/off
                performance             :   1,      //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)

                //Size & Position
                min_width               :   0,      //Min width allowed (in pixels)
                min_height              :   0,      //Min height allowed (in pixels)
                vertical_center         :   1,      //Vertically center background
                horizontal_center       :   1,      //Horizontally center background
                fit_portrait            :   1,      //Portrait images will not exceed browser height
                fit_landscape           :   0,      //Landscape images will not exceed browser width

                //Components
                navigation              :   1,      //Slideshow controls on/off
                thumbnail_navigation    :   1,      //Thumbnail navigation
                slide_counter           :   1,      //Display slide numbers
                slide_captions          :   1,      //Slide caption (Pull from "title" in slides array)
                slides                  :   [       //Slideshow Images
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/quietchaos-kitty.jpg', title : 'Quiet Chaos by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/day3-emily.jpg', title : 'Day 3 by Emily Tebbetts', url : 'http://www.nonsensesociety.com/2011/02/larissa/'},  
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/wilderness2.jpg', title : 'Wilderness by Larissa Felsen', url : 'http://www.nonsensesociety.com/2011/02/larissa/'} 
                                            ]

            }); 
        });

    </script> 

Body 中：

<!--Thumbnail Navigation--> 
<div id="prevthumb"></div> <div id="nextthumb"></div> 

<!--Control Bar--> 
<div id="controls-wrapper"> 
    <div id="controls"> 

        <!--Slide counter--> 
        <div id="slidecounter"> 
            <span class="slidenumber"></span>/<span class="totalslides"></span> 
        </div> 

        <!--Slide captions displayed here--> 
        <div id="slidecaption"></div> 

        <!--Navigation--> 
        <div id="navigation"> 
            <img id="prevslide" src="img/back_dull.png"/><img id="pauseplay" src="img/pause_dull.png"/><img id="nextslide" src="img/forward_dull.png"/> 
        </div> 

    </div> 
</div> 

希望以上内容有所帮助。

谢谢！

Answer 1

目前有两项行动正在发生。首先设置幻灯片总数和当前位置（通常为 1）。然后在循环内更新当前位置。因此，如果您打开 supersized.3.1.3.js，会看到以下行号：154、155、595 和 690。前两个行号最初将数字值放置在其 home 中。最后两个更新当前幻灯片。

首先，您需要为点编写 html 和 css。为 dot 编写一个 div 类，并为 dotActive 编写一个 div 类。点类是默认状态。当它处于活动状态时，您将向元素添加和删除类 dotActive。确保为它们提供所有数字索引，因为当您需要将 dotActive 类添加到正确的元素时，这会更容易。我正在想象 dot_1、dot_2 等等。

基本上，您需要使用第 155 行的 options.slides.length 值来确定要创建并注入到 html 中的元素数量：$('#slidecounter .slidenumber')。然后在更新循环中，可能只是通过 .slidenumber 集合中的each()，执行removeClass - 然后将Class添加到当前Slide值已知的元素..还有中提琴！

Answer 2

对 jQuery 的一个重要提示：不要写已写的内容！

流行的图像滑块是 EasySlider。它可以很容易地修改为使用“项目符号”进行导航，就像带有一些样式的那样。我提供的链接是使用数字的示例。可能是一个很好的起点。