圖像滑塊按鈕沒有觸發

我正在處理圖像滑塊，您可以通過prev和next按鈕瀏覽它們。其實這是一個非常簡單的滑塊，但我只是從jQuery開始。這裏是我的腳本：圖像滑塊按鈕沒有觸發

$(document).ready(function() { 
    var $active = $('.active'); 
    var $next = $active.next(); 
    var $prev = $active.prev(); 

    $('.next').click(function() { 
     $next.addClass('active'); 
     $active.removeClass('active'); 
    }) 

    $('.prev').click(function() { 
     $prev.addClass('active'); 
     $active.removeClass('active'); 
    }) 
});

//編輯

這裏的HTML：

<div id="imgslider"> 
     <img src="" class="active"/> 
     <img src=""/> 
     <img src=""/> 
     <div class="slidercontrols"> 
      <div class="prev">&lsaquo;</div> 
      <div class="next">&rsaquo;</div> 
     </div> 
    </div>

CSS：

.active{ 
    z-index: 4; 
} 

    .prev, .next 
{ 
    position: absolute; 
    height: 80px; 
    line-height: 55px; 
    width: 50px; 
    font-size: 100px; 
    text-align: center; 
    color: #fff; 
    top: 50%; 
    left: 0; 
    z-index: 5; 
    margin-top: -25px; 
    cursor: pointer; 
    opacity: .7; 
    transition: all 150ms; 
}

腳本不工作。我的意思是，當我點擊其中任何一個按鈕時，他們什麼都不做，我不知道問題是腳本還是html-css文件。

來源

2014-02-11 Alejandro Guayara

怎麼做你想讓他們做什麼？你只是添加/刪除類。 – witherwind

可以請你發佈你的滑塊內容..我的意思是你的圖像和箭頭圖像代碼在你的HTML頁面？那麼只有我們可以檢查.. –

顯示您的HTML。 –

您必須對滑塊內的所有圖像使用公共類名稱。在添加類active之前，您必須刪除該滑塊中的所有active類。然後你必須爲當前滑塊添加活動類。

HTML：

<img src="image/1.jpg" class="imageClass" /> 
<img src="image/2.jpg" class="imageClass active" /> 
<img src="image/3.jpg" class="imageClass" />

JS：

$(document).ready(function() { 
    var $active = $('.active'); 
    var $next = $active.next(); 
    var $prev = $active.prev(); 

    $('.next').click(function() { 
     //imageClass represents class name used for all images 
     $('.imageClass').removeClass('active'); 
     $next.addClass('active'); 
    }); 

    $('.prev').click(function() { 
     //imageClass represents class name used for all images 
     $('.imageClass').removeClass('active'); 
     $prev.addClass('active'); 
    }); 
});

來源

2014-02-11 05:25:54

圖像滑塊按鈕沒有觸發

回答

相關問題