jQuery滑塊上的第一個圖像不合適

我正在使用jQuery滑塊。目前有兩個圖像，第一個圖像的位置不正確。jQuery滑塊上的第一個圖像不合適

下面是我從工作的網址：http://www.ayrturfandtrac.org/

這是在頁面的左下方。

我想在與第二個圖像相同的位置放置第一個圖像（居中在按鈕之間）。

這裏是我的代碼：

HTML：

<div id="fader"> 
<img src="http://www.ayrturfandtrac.org/wp-content/uploads/2012/11/usedListing.png" class="usedListingImage"> 
<img src="http://www.ayrturfandtrac.org/wp-content/uploads/2012/12/kubotaB2320.png" class="usedListingImage"> 
</div> 

<div id="next"> 
<img id="nextListing" class="nextListing" src="http://www.ayrturfandtrac.org/wp-content/uploads/2012/12/nextListingArrow.png" onmouseover="this.src='http://www.ayrturfandtrac.org/wp-content/uploads/2012/12/nextListingHover.png'" onmouseout="this.src='http://www.ayrturfandtrac.org/wp-content/uploads/2012/12/nextListingArrow.png'"> 
</div>

的jQuery：

<script type="text/javascript"> 
jQuery (function() { 
    $('#fader img:not(:first)').hide(); 

    $('#fader img').each(function() { 
     var img = $(this); 
     $('<img>').attr('src', $(this).attr('src')).load(function() { 
      img.css('margin-left', -this.width/2 + 'px'); 
     }); 
    }); 

    var pause = false; 

    function fadeNext() { 
     $('#fader img').first().fadeOut().appendTo($('#fader')); 
     $('#fader img').first().fadeIn(); 
    } 

    function fadePrev() { 
     $('#fader img').first().fadeOut(); 
     $('#fader img').last().prependTo($('#fader')).fadeIn(); 
    } 

    $('#fader, #next').click(function() { 
     fadeNext(); 
    }); 

    $('#prev').click(function() { 
     fadePrev(); 
    }); 

    $('#fader, .button').hover(function() { 
     pause = true; 
    },function() { 
     pause = false; 
    }); 

    function doRotate() { 
     if(!pause) { 
      fadeNext(); 
     }  
    } 

    var rotate = setInterval(doRotate, 5000); 

}); 

</script>

來源

2012-12-06 Andrew Hendrie

請包括您的CSS，請爲此滑塊 – dmi3y

.nextListing {width：5％; float：right; margin：6％5％5％5％; padding-right：5％;} .prevListing {width：5％; float：left;保證金：7％5％5％5％; } .used {float：left; width：50％;} .usedListingImage {width：65％; float：left;顯示：塊; margin：-1％auto 0 auto;} #fader {display：block;保證金左：50％;寬度：95％} –

重新設計完整的圖庫結構或使用收件箱 – dmi3y

您設置離開基於它們的寬度圖像的邊緣：

$('<img>').attr('src', $(this).attr('src')).load(function() { 
    img.css('margin-left', -this.width/2 + 'px'); 
});

圖像的原始寬度但是一個比另一個大很多。您只是在瀏覽器中調整圖像大小（這絕不是一個好主意），因此javascript會獲得原始的未調整大小的值。

img.css('margin-left', -'160px');

，或者確保圖像的大小以相同的寬度，或者你也可以設置的div內的圖像和：你可以只是像-160px將它設置爲一個很好的價值硬編碼的保證金左值取而代之的是div的寬度。

來源

2012-12-06 20:14:44

謝謝保羅！問題解決了。最後在JS中將邊緣值更改爲0，然後稍微調整我的CSS。再次感謝。你有用Twitter嗎？ –

現在，當圖像切換時，我會發出奇怪的閃爍。有什麼辦法解決這個問題嗎？ –

你應該等待你的第一張圖像在淡入之前淡出，如果沒有，你會把他們兩個放在另一個之上。 fadeOut有一個回調函數，當函數完成時被調用。因此，使用它來確定何時淡入下一個圖像，如下所示： '$（'＃fader img'）。first（）。fadeOut（'slow'，function（）{「fade in next image here」}） ' –

第一個圖像元素樣式設置爲保證金左：-607px;這導致圖像向左移動。你需要玩這個結構。也許把HTML元素的樣式放到一個css文件中。我將其更改爲-160px，看起來更集中。

來源

2012-12-06 20:07:05 Steven

HTML元素中沒有樣式。你認爲這是JS的這一行嗎？ img.css（'margin-left'，-this.width/2 +'px'）; –

jQuery滑塊上的第一個圖像不合適

回答

相關問題