通過jQuery圖像滑塊顯示html內容

以下是我正在處理的頁面的（某種程度）工作版本：https://www.the-car-club.com/walsergold/home.asp。內容正確顯示，但只有最後一張幻燈片上的內容可點擊。關於如何在第一對夫婦幻燈片互動的任何建議？通過jQuery圖像滑塊顯示html內容

HTML

<div class="square-slider"> 
<div class="slide slide1"> 
    <div class="content light"> 
     <h3>Recreating The Square Slider</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate 
     aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p> 
    </div> 
    <img src="images/asset1.png" alt="" class="asset" /> 
</div> 
<div class="slide slide2"> 
    <div class="content dark"> 
     <h3>Looks Amazing Right?</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate 
     aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p> 
    </div> 
    <img src="images/asset2.png" alt="" class="asset" /> 
</div> 
<div class="slide slide3 inverted"> 
    <div class="content light"> 
     <h3>And Simple To Use</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate 
     aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p> 
    </div> 
    <img src="images/asset3.png" alt="" class="asset" /> 
</div> 
<a href="#" class="prev">Prev</a> 
<a href="#" class="next">Next</a> 
<div class="overlay"></div>

的JavaScript（jQuery的）

(function($){ 

$('.square-slider').each(function(){ 
    var slider = $(this), 
     slides = slider.find('.slide'), 
     currentSlide = 0; 

    slides.show(); 
    $(slides[currentSlide]).addClass('active'); 
    $('.next,.prev', slider).show(); 

    $('.prev', slider).on('click', function(){ 
     slides.removeClass('active'); 
     currentSlide--; 
     if(currentSlide < 0) currentSlide = slides.length - 1; 
     $(slides[currentSlide]).addClass('active'); 
     return false; 
    }); 

    $('.next', slider).on('click', function(){ 
     slides.removeClass('active'); 
     currentSlide++; 
     if(currentSlide > slides.length - 1) currentSlide = 0; 
     $(slides[currentSlide]).addClass('active'); 
     return false; 
    }); 
}); 

})(window.jQuery);

來源

2013-03-05 Travis

你需要顯示：無/塊的幻燈片。在你當前的代碼中，你只是將類的'opacity'從1改爲0。所以元素仍然存在，最後一個元素（slide3）將是唯一可點擊的元素。刪除所有對.show（）的引用，編輯你的CSS並將display：block添加到'active'。

來源

2013-03-05 18:59:04 Syon

謝謝！這是一大進步;但它也造成了一個新問題。刪除對.show（）的第一個引用已導致我所有的CSS轉換停止工作。 – Travis 2013-03-05 21:09:13

要保持可訪問性，請嘗試此操作而不是{display：none}。

.slide {left: -999em;} 
.slide.active {left: 0;}

但是，您需要將這些樣式合併到您的jQuery中，以防止突然轉換。

來源

2013-03-05 19:01:29 isherwood

通過jQuery圖像滑塊顯示html內容

回答

相關問題