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，但如果有多个图片，则应使用课程。

编辑：我将选择器更改为您添加的类。你现在可以想象出来，但它应该这样运作。

Answer 2

对于许多循环图像效果，可能值得查看这个jQuery循环插件：http://jquery.malsup.com/cycle2/

这是一个可能让您感兴趣的基本寻呼机：http://jquery.malsup.com/cycle2/demo/pager.php

以下是许多可能有用的演示：http://jquery.malsup.com/cycle2/demo/

Answer 3

使用：

<html>
<head>
<title>Project</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script type="text/javascript">
  var n=0,switcher=1; // Note change 
  var nmax=2;
  function timer()
  {
    window.setInterval(function ()
    {
    if(switcher){ // Note change 
      n+=1;
    }
    else{ // Note change 
    n--; // Note change 
    } // Note change 
      if(n>=nmax) // Note change 
      {
       switcher=0; // Note change 
      }
      if(n<=0) // Note change 
     {
     switcher=1; // Note change 
     }

      $('#slideImage').animate({left:''+(n)*(1366)*(-1)+'px'},500); // Note change 
    },2500);
  }
    $(document).ready(function(e) {
        timer();
    });
</script>
<style type="text/css">
.des_p{height: 400px; width: 1366px;float: left; }
.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; } 
</style>
</head>
<body>
<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" style="position:absolute; top:0px; left:2732px;" /><!-- Note change -->
 </div> 
</div>
</body>
</html>

实际上问题不在你的js中，但由于身高低的问题导致css出现hidden。

我通过使用positioning中的css元素来解决这个问题。

根据您的上一条评论，我已经更新了双向滑动图像的答案。

请注意Note change标记的行。希望它能帮到你。欢呼!!

Answer 4

试试吧

$(document).ready(function() {
  $('#slideImage').animate({left: '-200px'},2500);
});

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

4 个答案: