为什么css margin会在点击按钮时隐藏图像？

Question

I try to scroll my images using next and previous button. I used CSS to do the thing. I am setting the margin of ul to get next and previous image but when I click on next button it hides my image instead of showing the next image. Could you please tell me how to show next image ?

Here is my code:

 $(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');
})

})

here is fiddle for you. https://jsfiddle.net/urLdLdLm/9/ You have to add your counter check for prevention of scroll to be go out of screen

Answer 2

Try to use +=200 and -=200 values as the parameter of .css() methods.

 $(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

When you're calling .css('margin-left','200px') or .css('margin-left','-200px') , you're setting the margin left to that value, not adding or subtracting from the current value.

Also, the next button should be subtracting, not adding and vice versa for the previous button.

Here's a jsFiddle of it working.

You're gonna need to set some bounds on this as well, so that the user doesn't add or subtract from the margin-left ad infinitum.