jQuery滑塊的圖像和描述

我想爲我的投資組合網站創建一個滑塊。jQuery滑塊的圖像和描述

爲了表達什麼，我想實現的，這裏是什麼，我希望它看起來像一個圖像... enter image description here

基本上當你到了一個或下一個箭頭，無論是屏幕截圖和描述性文字會單獨滑動（如旋轉木馬效果），顯示下一屏幕截圖和說明。我猜這是在jQuery中完成的，但我查看過的其他jQuery滑塊並試圖一次滑動整個區域。

沒有人知道如何實現我想要做的事，或知道有教程的網站嗎？

許多在此先感謝

湯姆

所有標籤的jQuery UI的滑塊的

來源

2012-10-05 Tom

只是爲了說明，單擊箭頭時，例如，您需要將膝上型計算機圖像向左滑動，並將描述向右滑動，然後將下一個投資組合項目的圖像和說明滑入？ –

首先是指基於其中滑塊上的手是完全不同的jQuery的一部分，改變值的滑塊，

但不管怎麼說，你需要一個滑塊插件，可以讓你幻燈片內容的div，here是一個

的例子則在div你會放置圖片和相關說明和風格它看起來漂亮的CSS

這樣也許

<div class="sliderWrap"> 
    <div class="sliderContent"> 
      <img src="..." /> 
      Content 1 goes here 
    </div> 

    <div class="sliderContent"> 
      <img src="..." /> 
      Content 2 goes here 
    </div> 
</div>

來源

2012-10-05 16:26:55

謝謝斯科特，我刪除了不正確的標籤。我會給這個去看看它是否有效。 – Tom

這是一個非常高的水平的問題，所以我只能給你一個類似的答案。以下是我將如何處理您的設計。步驟：

1）在UL中佈置幻燈片和說明。每個IL包含相同的佈局但具有不同的圖像和描述。

2）使用CSS，設置UL的樣式，以固定寬度顯示所有LI元素作爲行內塊。

3）將您的UL與溢出的包裝DIV設置爲隱藏

4）使用jQuery或簡單的JavaScript簡單地增加或減少以增量等於你LI的固定寬度的UL的相對位置。 JQuery將幫助您更輕鬆地製作動畫（請參閱JQuery Animate（））。

你的基本結構看起來像：

<div id="slider"> 
    <ul> 
     <li><img src="slide1.png">Slide 1 description text Slide 1 description text Slide 1 description text Slide 1 description text </li> 
     <li><img src="slide2.png">Slide 2 description text Slide 2 description text Slide 2 description text Slide 2 description text </li> 
     <li><img src="slide3.png">Slide 3 description text Slide 3 description text Slide 3 description text Slide 3 description text </li> 
     <li><img src="slide4.png">Slide 4 description text Slide 4 description text Slide 4 description text Slide 4 description text </li> 
     <li><img src="slide5.png">Slide 5 description text Slide 5 description text Slide 5 description text Slide 5 description text </li> 
     <li><img src="slide6.png">Slide 6 description text Slide 6 description text Slide 6 description text Slide 6 description text </li> 
    </ul> 
</div> 

<input type="button" id="slide_left" value="LEFT"> 
<input type="button" id="slide_right" value="RIGHT">

這是一個非常基本的骨架，但應該是一個良好的開端。其餘的CSS可以完成。

這裏的CSS：

#slider { width:600px; height:250px; background:url('slider_laptop_bg.png'); background-color:#eee; overflow:hidden; } 
#slider ul { position:relative; left:0px; list-style-type:none; width:5000px; hieight:100%; padding:0; margin:0; } 
#slider ul li { float:left; width:600px; height:250px; display:inline; padding:0px; margin:0; } 
#slider ul li img { float:left; width:250px; height:200px; }

而這裏的jQuery來啓用它。看看Animate（）爲更好的東西。您還需要添加幻燈片檢查的結尾以及其他一些細節。

$(document).ready(function() { 

    $('#slide_left').on('click', function() { 
     $('#slider ul').css('left', $('#slider ul').position().left - 608); 
    }); 

    $('#slide_right').on('click', function() { 
     $('#slider ul').css('left', $('#slider ul').position().left + 608); 
    }); 

});

希望這會有所幫助。

來源

2012-10-05 16:34:09

謝謝布賴恩生病讓這一去！ – Tom

我需要這樣的個人週末項目，並且我想我只是把它建造出來。我在上面添加了我的粗略代碼。祝你好運。 –

非常感謝Bryan – Tom

@tom無論何時需要使用旋轉木馬，我都使用this。希望這會幫助你。其中最好的部分是它的響應速度。

來源

2013-04-16 09:33:48 V15HM4Y

jQuery滑塊的圖像和描述

回答

相關問題