javascript - 如何使用jquery将图像向左滑动

Question

我尝试从右向左滑动两张图片。幻灯片正在工作，但只显示第一张图片。请问是什么原因？这是我的代码:

<script type="text/javascript">
  var n=0;
  var nmax=2;
  function timer()
  {
    window.setInterval(function ()
    {
      n+=1;
      if(n>nmax)
      {
        n=0;
        $('#slideImage').css('left','0');
      }

      $('#slideImage').css('left',(n)*(1366)*(-1)+'px');
    },2500);
  }
    $(document).ready(function(e) {
        timer();
    });
</script>

CSS

.wn_p { height: 400px; width: 1366px; float: left; }
.w_n { height: 400px; width: 100%; overflow: hidden; background-color: #09C; }
.w_n2 { height: 400px; width: 2732px; margin-right: auto; 
margin-left: auto; position: relative; display: inline-table; 
transition: linear 0.75s 0.2s; -moz-transition: linear 0.75s 0.2s; 
-webkit-transition: linear 0.75s 0.2s; } 

这里是 html

<div class="w_n"> 
<div class="w_n2" id="slideImage"> 
<div class="hd_p"> 
<img name="shift" src="image/bn2.jpg" class="wn_p" /> 
<div class="des_p">The company maintains high quality standard in all its operations. With high production capacity, the policy thrust is to continue to provide cost-effective, affordable, local alternatives of life saving drugs to the teaming population.
</div> 
</div> 
<img name="shift" src="image/bn3.jpg" class="wn_p" />
 </div> 
</div>

Answer 1

如果你仍然使用 jQuery，为什么不使用它的 animate功能？

$(document).ready(function(e) {
    $('.wn_p').animate({left: '-200px'}, {duration: 2500});
});

您可以设置很多选项，所以如果您显示一些 html 并详细说明您的需求，我们可以更好地匹配您期望的结果。

事实上只显示一张图片可能是 CSS 问题。您正在使用 ID，但如果有多个图像，则应使用一个类。

编辑:我将选择器更改为您添加的类。您现在可能已经明白了，但它应该以这种方式工作。