我是一个修改jQuery的菜鸟，并设法做了一些奇怪的简单代码，但对我来说修改这个库是一个更大的任务：http://buildinternet.com/project/supersized/ - 它当前使用了next / prev按钮，数字计数器，例如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);
<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>
体：
<!--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>
希望以上有所帮助。
谢谢！
答案 0 :(得分：1)
目前发生了两件事。首先，设置幻灯片的总数和当前位置（通常为1）。然后在循环内部，当前位置得到更新。因此，如果你破解openized.3.1.3.js，请参阅以下行号：154,155,595和690 ..前两行号最初将数字值放在他们的家中。最后两个更新当前幻灯片。
首先，您需要为您的点写下html和css。为dot编写一个div类，为dotActive编写一个div类。点类是默认状态。当它处于活动状态时，您将添加并删除元素的dotActive类。确保为它们提供所有数字索引，因为当您需要将dotActive类添加到正确的元素时，它会更容易。我想象的是，dot_1，dot_2等等。
基本上你会想要使用第155行的options.slides.length的值来确定要创建和注入html的元素数量：$（'＃slidecounter .slidenumber'）。然后在更新循环，可能只是每个（）通过.slidenumber集合，执行removeClass - 然后addClass到您的currentSlide值已知的元素..并且中提琴！
答案 1 :(得分：0)
jQuery的一个重要提示：不要写出已写的内容！
一个流行的图片滑块是EasySlider。它可以很容易地修改为使用“子弹”进行导航，就像一些造型一样。我提供的链接是使用数字的样本。可能是一个很好的起点。