Question

我尝试使用下一个和上一个按钮滚动我的图片。我使用 CSS 来做这件事。我设置ul的边距以获得下一张和上一张图片但是当我点击下一个按钮时，它会隐藏我的图像，而不是显示下一个图像。你能告诉我如何展示下一张图片吗？

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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()方法的参数。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

当您拨打.css('margin-left','200px')或.css('margin-left','-200px')时，您需要将剩余边距设置为该值，而不是在当前值中添加或减去。

此外，下一个按钮应该减去，而不是添加，反之亦然。

这里有一个jsFiddle。

您还需要在此设置一些界限，以便用户不会无限地添加或减少边距左边的广告。

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

3 个答案: