我正在构建一个简单的jQuery图像旋转器脚本，而且我被困在最后一块。我希望能够单击脚本顶部的数字跳转到幻灯片放映中的特定幻灯片。点击似乎正在注册正确的幻灯片编号，但节目没有按照预期的那样做。
以下是代码：
<script type="text/javascript">
jQuery(document).ready(function($) {
function reIndex () {
if (dir == 'prev') {
if (slide_curr == slide_min + 1) {
slide_prev = slide_max;
slide_curr = slide_min;
slide_next = slide_min + 1;
} else if (slide_curr == slide_min) {
slide_prev = slide_max - 1;
slide_curr = slide_max;
slide_next = slide_min;
} else {
slide_curr = slide_prev;
slide_prev = slide_curr - 1;
slide_next = slide_curr + 1;
}
} else {
if (slide_curr == slide_max - 1) {
slide_prev = slide_max - 1;
slide_curr = slide_max;
slide_next = slide_min;
} else if (slide_curr == slide_max) {
slide_prev = slide_max;
slide_curr = slide_min;
slide_next = slide_min + 1;
} else {
slide_curr = slide_next;
slide_prev = slide_curr - 1;
slide_next = slide_curr + 1;
}
}
}
function doTransition () {
// reset the z-index vals
$(slides).css('z-index','1');
$(slides[slide_curr]).css('z-index', '2');
// turn on the display of the next slide
if (dir == 'prev') {
$(slides[slide_prev]).css('display','block');
} else {
$(slides[slide_next]).css('display','block');
}
// fade the current slide out (to zero opacity)
$(slides[slide_curr]).fadeOut(900);
}
function printSelectors () {
var li_string = '';
var selector_class;
for (var i=0; i<=slide_max; i++) {
//display_num = i+1;
display_num = '';
if (slide_curr == i) {
selector_class = ' class="current"';
} else {selector_class = '';}
li_string = li_string + '<li id="slider_sel_'+i+'"'+selector_class+'>'+display_num+'</li>';
}
$('#bx_slider ul.slide-selectors').html(li_string);
// click number selector
$('#bx_slider ul.slide-selectors li').click(function() {
slide_curr = $(this).index();
clickSlide();
$('#bx_state2').html('clicked: '+$(this).index()); // just for debugging purposes
slideShow_play();
});
}
function reClassSelectors () {
$('#bx_slider ul.slide-selectors li').removeClass('current');
$('#slider_sel_'+slide_curr).addClass('current');
}
function clickSlide (clicked_slide_index) {
//slide_curr = clicked_slide_index;
if (slide_curr = slide_max) {
slide_prev = slide_curr - 1;
slide_next = slide_min;
} else if (slide_curr == slide_min) {
slide_prev = slide_max;
slide_next = slide_curr + 1;
} else {
slide_prev = slide_curr - 1;
slide_next = slide_curr + 1;
}
}
function slideShow_play () {
doTransition();
reIndex();
reClassSelectors();
printState();
if (is_paused != true) {
timeout = setTimeout(slideShow_play, interval);
}
}
function slideShow_start () {
$(slides[slide_curr]).css('display','block');
printSelectors();
timeout = setTimeout(slideShow_play, 3000);
}
// just for debugging purposes
function printState () {
var state_str = 'slide_prev='
+ slide_prev
+ '; slide_curr='
+ slide_curr
+ '; slide_next='
+ slide_next
+ '; slide_max='
+ slide_max
+ '; slide_min='
+ slide_min;
$('#bx_state').html(state_str);
}
// set hover
$('#bx_slider').hover(function() {
is_paused = true;
clearTimeout(timeout);
}, function() {
is_paused = false;
dir = 'next';
timeout = setTimeout(slideShow_play, interval);
});
// prev-next
$('#bx_slider .slide-btns').click(function() {
if ($(this).hasClass('prev')) {dir = 'prev';} else {dir = 'next';}
slideShow_play();
});
// variables, initialize the settings
var slides = $('#bx_slider .slide');
var interval = 4000;
var is_paused = false;
var dir = 'next';
var slide_min = 0;
var slide_max = slides.length - 1;
var slide_curr = 0;
var slide_prev = slide_max;
var slide_next = 1;
// start it all off when the page loads
slideShow_start();
});
</script>
<style type='text/css'>
#bx_slider {
width:922px; height:530px; margin:100px auto;
position:relative;}
/* slide frame */
#bx_slider .slide {
width:922px; height:530px;
display:none; position:absolute; z-index:1;}
/* slide image */
#bx_slider .slide-pic {
position:absolute; z-index:1;}
/* slide caption */
#bx_slider .slide-caption {
position:absolute; z-index:2; left:0; bottom:0;
background:url('caption-bg.png'); width:922px; height:60px;
font-size:14px; line-height:60px; color:#fff; text-align:center;}
/* buttons: prev or next */
#bx_slider .slide-btns {
position:absolute; z-index:2;
width:50%; height:100%; cursor:pointer;}
#bx_slider .slide-btns.prev {left:0; background:none;}
#bx_slider .slide-btns.next {right:0; background:none;}
#bx_slider .slide-btns.prev:hover {
background:url('btn-prev.png') no-repeat left center;}
#bx_slider .slide-btns.next:hover {
background:url('btn-next.png') no-repeat right center;}
/* selectors (numbers or radio buttons, etc) */
#bx_slider ul.slide-selectors {
margin:0; padding:0; list-style:none; height:20px; width:100%;
position:absolute; z-index:5; top:-60px; text-align:center;}
#bx_slider ul.slide-selectors li {
display:inline-block; margin:10px; padding:0;
width:41px; height:41px; cursor:pointer;}
#slider_sel_0 {background:url('selector-sprite.png') no-repeat 0 0;}
#slider_sel_0.current {background-position:0 -43px;}
#slider_sel_1 {background:url('selector-sprite.png') no-repeat -43px 0;}
#slider_sel_1.current {background-position:-43px -43px;}
#slider_sel_2 {background:url('selector-sprite.png') no-repeat -86px 0;}
#slider_sel_2.current {background-position:-86px -43px;}
#slider_sel_3 {background:url('selector-sprite.png') no-repeat -129px 0;}
#slider_sel_3.current {background-position:-129px -43px;}
#slider_sel_4 {background:url('selector-sprite.png') no-repeat -172px 0;}
#slider_sel_4.current {background-position:-172px -43px;}
</style>
<div id="bx_slider">
<div class='slide-btns prev'></div>
<div class='slide-btns next'></div>
<ul class='slide-selectors'></ul>
<div class='slide'>
<img src="slide1.jpg" class='slide-pic' />
<div class='slide-caption'>hello world, slide one</div>
</div>
<div class='slide'>
<img src="slide2.jpg" class='slide-pic' />
<div class='slide-caption'>hello world, slide two</div>
</div>
<div class='slide'>
<img src="slide3.jpg" class='slide-pic' />
<div class='slide-caption'>hello world, slide three</div>
</div>
<div class='slide'>
<img src="slide4.jpg" class='slide-pic' />
<div class='slide-caption'>hello world, slide four</div>
</div>
<div class='slide'>
<img src="slide5.jpg" class='slide-pic' />
<div class='slide-caption'>hello world, slide five</div>
</div>
</div><!-- #bx_slider -->
<div id='bx_state'></div>
<div id='bx_state2'></div>
以下是实时代码的链接：http://www.exit44.com/slider/
答案 0 :(得分：1)
看起来你有一个错字：
function clickSlide (clicked_slide_index) {
//slide_curr = clicked_slide_index;
if (slide_curr = slide_max) {
slide_prev = slide_curr - 1;
slide_next = slide_min;
} else if (slide_curr == slide_min) {
slide_prev = slide_max;
slide_next = slide_curr + 1;
} else {
slide_prev = slide_curr - 1;
slide_next = slide_curr + 1;
}
}
您需要取消注释slide_curr = clicked_slide_index;，并且需要将(slide_curr = slide_max)更改为(slide_curr == slide_max)，这样您才不会使用{{1}的值覆盖slide_curr的值}。
答案 1 :(得分：1)
你的代码对于这么简单的东西来说太庞大了。
你可以这样写：
JQ：
var stop=false, time, c=0, slidesN = $('#bx_slider .slide').length;
for(var i=0; i<slidesN; i++){
$('.slide-selectors').append('<li>'+(i+1)+'</li>');
}
$('.slide-selectors li').eq(0).addClass('active');
$('.slide:gt(0)').hide();
function a(){
$('.slide').eq(c).fadeTo(600,1).siblings('.slide').fadeTo(600,0);
$('.slide-selectors li').eq(c).addClass('active').siblings('li').removeClass('active');
}
function cc(){
c = c%slidesN;
}
function aa(){
if(stop){return;}
clearTimeout(time);
time = setTimeout(function(){
c++;cc();a();aa();
},2500);
}
aa();
$('.slide-btns').click(function() {
btn = $(this).hasClass('prev') ? (c--, cc(), a()) : (c++, cc(), a());
});
$('#bx_slider').bind('mouseenter mouseleave', function(e) {
me_ml = ( e.type === 'mouseenter' ) ? ( stop=true, clearTimeout(time) ) : ( stop=false, aa() );
});
$('.slide-selectors li').bind('click',function(){
var liInd = $(this).index();
c=liInd;cc();a();
});
它是'无错误'（即使jsBin不能很好地接受三元组的编写。）如果你熟悉Modulo和Ternary运算符，它会更小，更容易调试。