jQuery幻燈片按鈕，與圖片＃座標？

更新：我想出了謝天謝地......所以關鍵是要做出position: absolute並取出底部：我的CSS最後一件事是400px。jQuery幻燈片按鈕，與圖片＃座標？

我試圖做一個幻燈片顯示的圖像，淡入和淡出時，圓形按鈕被點擊。有4張圖片，會有4個圓形按鈕，所以如果我點擊第3個按鈕，第3張圖片就會淡入。但是，我的代碼沒有正確執行。我估計我使用不正確的index()？照片沒有出現。他們只是褪色，然後淡出，然後所有的圖片完全消失。我想這是因爲我的position:relative在「.pic」上。請幫助！

這裏是我的HTML：

<body> 
<div class="wrapper"> 
    <div class="image_frame"> 
     <div src="" class="first"></div> 
      <img src="images/galaxy.jpg" class="gala pic"> 

      <img src="images/aurora.jpg" class="auro pic"> 


    </div> 

    <div class="buttonholder"> 
     <ul> 
      <li>1</li> 
      <li>2</li> 
      <li>3</li> 
      <li>4</li> 
     </ul> 
    </div> 
</div> 
</body> 
</html>

這裏是我的CSS：

html, body { 
    background: black; 
    margin: 0; 
    padding: 0; 
} 

.wrapper { 
    width: 800px; 
    margin: 0 auto; 
    padding: 0; 
} 

.image_frame { 
    width: 700px; 
    height: 400px; 
    position: relative; 
    overflow: hidden; 
} 

img { 
    width: 700px; 
    height: 400px; 
    padding-top: 10px; 
    float: left; 
} 


.gala { 
    display: block; 
    position: relative; 
} 

.buttonholder { 
    display: block; 
    width: 400px; 
    margin: 0 auto; 
    text-align: center; 
} 

ul li { 
    list-style: none; 
    height: 3px; 
    width: 3px; 
    float: left; 
    background: #efefef; 
    padding: 10px; 
    margin: 0 5px; 
    border-radius: 100px 100px 100px 100px; 
    cursor: pointer; 
    text-indent: -9999px; 
} 

.button_normal { 
    background: #efefef; 
} 

.selected { 
    background: grey; 
} 


.pic { 
    position: relative; 
    bottom: 400px; 
}

這是我的JS

$('ul li').click(function(){ 
    $('img').fadeOut(300); 
    var listPos = $('ul').index(this); 
    $('img').eq(listPos).fadeIn(300); 
});

來源

2012-08-15 Edmund

最低限度地改變你的代碼替換代碼

var listPos = $('ul').index(this);

與此：

var listPos = $('ul li').index(this);

，或者更好：

var listPos = $(this).index();

爲了回答你問題的第二部分，你可能要參考這個答案：How to overlay images，或本Image over Image CSS

來源

2012-08-15 19:32:51 Vlad

jQuery幻燈片按鈕，與圖片＃座標？

回答

相關問題