Question

我有一个滑块，它响应哈希标签更改以移动到下一张或上一张幻灯片。它通过触发我绑定在控件上的click事件来完成此操作。当我更改哈希标记时，一切都在IE 9和Firefox中按预期工作。

然而，在Safari，Chrome和Opera中，当脚本触发正确控制时，会弹出一个问题。如果左控制被触发，它可以正常工作。这使我对这个问题感到困惑，因为它在双方都不一致。

问题是整个幻灯片显示为它移动了两个地方而不是一个，或三个而不是两个。基本上好像它每次都被一个额外的空间移动。令人困惑的是，当我检查#slideInner时，它表示剩余边距已经移动了适当数量，但它仍然看起来好像它移动了一个额外的空间。

以下是我使用的代码示例。

HTML

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div id="rightarrow" class="control">&nbsp;</div>
<div id="wrap">
<div id="slideshow">
<div id="slidesContainer">
<div id="slideInner>
<div id="homes" class="slide"> stuff in here </div>
<div id="blogs" class="slide"> stuff in here </div>
<div id="portfolio" class="slide"> stuff in here </div>
</div>
</div>
</div>
</div>
<div id="leftarrow" class=" control">&nbsp;</div> 
</body>
</html>

滑块元素的CSS

#slideshow #slidesContainer
{
margin:0 auto;
width:936px; 
overflow: hidden;
position:block;
background-color: transparent;

}

#slideshow 
{   
width: 100%;
}

#slideInner
{
position: relative;
}

JS

$(document).ready(function(){

var = slideWidth = '936';
var = currentPosition = 0;
var slides = $('.slide');
var numberOfSlides = slides.length;

$('#slideInner').css('width', slideWidth * numberOfSlides);


$('.control').bind('click', function(){
// Determine new position
  currentPosition = ($(this).attr('id')=='rightarrow')
? currentPosition+1 : currentPosition-1;      

 function
  $('#slideInner').animate({'marginLeft' : slideWidth*(-currentPosition)}, 1500);
});

$(window).load(function() { 
 hashchange();  
});

function hashchange()   
{                               
$(window).hashchange(function(){    

  // If hashchange happens whilst in state One
    if (currentPosition == 0 && location.hash == '#blogs' )
             {
    // click right once to slide two        
            $('#rightarrow').trigger('click');     
        }
else
    if (currentPosition == 0 && location.hash == '#portfolio' )
    {
    // click right twice to page three
    $('#rightarrow').trigger('click');
    $('#rightarrow').trigger('click');
    }

// iif hashchange happens whilst in state two
else 
    if (currentPosition == 1 && location.hash == '#portfolio' )
    {
    //click right once to page three
    $('#rightarrow').trigger('click');  
    }
else                                
    if (currentPosition  == 1 && location.hash == '#homes' )
    {
    // click left once to page one
    $('#leftarrow').trigger('click');   
    }

    //..... and so on with more slides 
  });

Answer 1

嗯，而不是处理你正在谈论的问题，总的来说，我只是重新安排代码，这样你就不会以这种方式触发事件。你现在正在做的事情是非常低效的，如果你需要添加更多幻灯片，你会花费很多时间。类似的东西：

// create array of all your pages
var slides = ["#homes", "#blogs", "#portfolio"];
$('.control').bind('click', function(){
    // Determine new position
    currentPosition = $(this).attr('id')=='rightarrow' ? currentPosition+1 : currentPosition-1;      
    moveToPage(currentPosition);
});

function moveToPage(){
    $('#slideInner').animate({'marginLeft' : slideWidth*(-currentPosition)}, 1500);
}

$(window).hashchange(function(){    
    currentPosition = $.inArray(location.hash, slides);
    moveToPage();
});

可能更有效率。

jQuery .trigger（）调用导致Safari / Chrome / Opera中出现意外行为

1 个答案: