使用隱藏圖像的基本圖像滑塊

Question

我正在試圖製作一個圖像滑塊，其中我基本上具有水平排列的圖像（每個寬度爲700px，高度不等），然後使用JQuery來動畫滑動右鍵或左鍵700px以顯示下一張照片。我對jQuery非常陌生，我不確定我的下一步是什麼，以及我的CSS應該如何實現這一目標。

jQuery的

$("#slideRight").click(function() { 
$("#slider").animate({right:700}); 
}); 

$("#slideLeft").click(function() { 
$("#slider").animate({left:700}); 
}); 

HTML

<div id="slideButtons"> 
<input type="button" value="next L" id="slideLeft" /> 
<input type="button" value="next R" id="slideRight" /> 
</div> 

<div id="slider"> 
<img src="slideTest.jpg" alt="" /> 
<img src="slideTest2.jpg" alt="" /> 
<img src="slideTest3.jpg" alt="" /> 
</div> 

CSS

#slider { 
height: auto; 
width: 700px; 
position: relative; 
background-color: blue; 
} 

Answer 1

如果你在構建真正感興趣這裏的圖像滑塊是我可以很快建立的方式。

注： - 我已經使用隱藏和顯示方法來實現滑塊有很多方法可以使用，你可以實現。請遵循邏輯，而不是直接使用代碼。

Logic是簡單

1. 生成與IDS的圖像設置爲連續整數的值
2. 使所有圖像作爲通過設置屬性顯示無
3. 使可見的第一個元素
4. 然後當隱點擊下一個按鈕檢查你是否在最後一個圖像，如果是，顯示第一個圖像，如果不顯示下一個圖像
5. 找到下一個圖像，你可以得到當前可見的圖像ID，並添加1到獲得下一個連續的圖像
6. 同樣，對於以前你可以減去顯示前一個圖像
7. 同時顯示你必須檢查是否正在查看的第一個形象，如果這樣顯示以前的圖像最後一張圖片。另外通過計算ID按照步驟6

這裏樣本粗略代碼，我試圖建立對這個問題，（未測試）

// First make the first image visible 
$(".slide-content img:first-child").show(); 

// Bind the click handler 
$("#slideRight").click(function() { 

// if there is only one image in the slider then return false 
if($(".slide-content > img").length == 1) 
{ 
    return false; 

} 

// Set current to the visible element 
var current = $(".slide-content > img:visible").attr('id'); 

// hide the visible element 
$('#'+current).hide(); 


if(current == $(".slide-content > img").length) 
{ 
    current = 1;  
} 
else 
{ 
    current = parseInt(current)+1; 
} 

$('#'+current).show(); 


}); 

$("#slideLeft").click(function() { 
if($(".slide-content > img").length == 1) 
{ 
    return false; 

} 

var current = $(".slide-content > img:visible").attr('id'); 
$('#'+current).hide(); 
if(current == 1) 
{ 
    current = $(".slide-content > img").length; 
} 
else 
{ 
    current = parseInt(current)-1; 
} 

$('#'+current).show(); 


}); 

<div id="slideButtons"> 
<input type="button" value="next L" id="slideLeft" /> 
<input type="button" value="next R" id="slideRight" /> 
</div> 

<div class="slide-content"> 
<img id = '1' src="slideTest.jpg" alt="" /> 
<img id = '2' src="slideTest2.jpg" alt="" /> 
<img id = '3' src="slideTest3.jpg" alt="" /> 
</div>