爲什麼css邊緣在點擊按鈕時隱藏圖像？

Question

我嘗試使用下一個和上一個按鈕滾動我的圖像。我用CSS來做這件事。我將ul的邊距設置爲獲得下一個和上一個圖像 ，但是當我點擊下一個按鈕時，它隱藏了我的圖像，而不是顯示下一個圖像。你能告訴我如何顯示下一張圖片嗎？

這裏是我的代碼：

$(function() { 
 
    $('#next').click(function() { 
 
    alert('next'); 
 
    $('.outer ul').css('margin-left', '200px'); 
 
    }); 
 
    $('#pre').click(function() { 
 
    alert('pre'); 
 
    $('.outer ul').css('margin-left', '-200px'); 
 
    }); 
 
});

.outer { 
 
    width: 200px; 
 
    overflow: hidden 
 
} 
 
.outer ul { 
 
    width: 600px; 
 
    margin: 0 auto 0 auto; 
 
} 
 
.outer li { 
 
    display: inline-block; 
 
    width: 195px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outer"> 
 
    <ul> 
 
    <li> 
 
     <img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"> 
 
    </li> 
 
    <li> 
 
     <img alt="" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT7lw5rwUWCsmOFSTUuFF84niMBZg6J9KeWhws1Ysib3VdVTM8-RA"> 
 
    </li> 
 
    <li> 
 
     <img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"> 
 
    </li> 
 

 
    </ul> 
 
    <button id='pre'> 
 
    previous 
 
    </button> 
 
    <button id='next'> 
 
    next 
 
    </button> 
 

 
</div>

Answer 1

$(function(){ 
var nextprevmargin = 0; 
$('#next').click(function(){ 
    nextprevmargin = parseInt(nextprevmargin) - 200; 
    $('.outer ul').css('margin-left',nextprevmargin + 'px'); 
}) 
$('#pre').click(function(){ 
    nextprevmargin = parseInt(nextprevmargin) + 200; 
    $('.outer ul').css('margin-left',nextprevmargin + 'px'); 
}) 

}) 

這裏是你撥弄。 https://jsfiddle.net/urLdLdLm/9/ 你必須添加計數器檢查預防滾動的是走出去的屏幕

嘗試

Answer 2

使用+=200和-=200值的.css()方法的參數。

$(function(){ 
 

 
$('#next').click(function(){ 
 
alert('next'); 
 
console.log() 
 
$('.outer ul').css('margin-left','-=200') 
 
$ 
 
}) 
 
$('#pre').click(function(){ 
 
alert('pre') 
 
$('.outer ul').css('margin-left','+=200') 
 
}) 
 

 
})

.outer { 
 
width:200px; 
 
overflow:hidden; 
 
} 
 
.outer ul { 
 
    width: 600px; 
 
    margin: 0 auto 0 auto; 
 
} 
 

 
.outer li { 
 
    display: inline-block; 
 
    width:195px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outer"> 
 
    <ul> 
 
     <li><img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li> 
 
     <li><img alt="" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT7lw5rwUWCsmOFSTUuFF84niMBZg6J9KeWhws1Ysib3VdVTM8-RA"></li> 
 
     <li><img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li> 
 
    
 
    </ul> 
 
    <button id='pre'> 
 
    previous 
 
    </button> 
 
    <button id='next'> 
 
    next 
 
    </button> 
 
    
 
</div>

Answer 3

當你調用.css('margin-left','200px')或.css('margin-left','-200px')，你設置的保證金留下來的是價值，而不是添加或從當前值中減去。

此外，下一個按鈕應該是減去，而不是增加，反之亦然的前一個按鈕。

這是jsFiddle它的工作。

您還需要對此設置一些界限，以便用戶不會從保證金空間無限增加或減少。