1

我正在尝试制作最简单的图像幻灯片，从左到右滚动 div 中的图像。

我的问题是 setInterval 函数只运行一次，我正在努力解决为什么或如何解决。

提前谢谢了。我正在调用 setInterval 函数 jQuery document.ready(function..

<div class="highlight_Block" id="FeaturesList_block">
   <div id="img_wrapper_05">
      <ul id="FeaturesList_Ul">

       <li id="DEMO1_000001" class="FeaturesList_li">
          <img src="http://www.hostpaperz.com/wp-content/uploads/2013/06/abstract-color-349935.jpg" height="214" width="321">
       </li>

       <li id="DEMO1_000002" class="FeaturesList_li">
          <img src="http://www.hostpaperz.com/wp-content/uploads/2013/06/Abstract-06-HD-wallpaper.jpg" width="321">
       </li>

       <li id="DEMO1_000003" class="FeaturesList_li">
          <img src="http://www.hostpaperz.com/wp-content/uploads/2013/06/abstract-wallpapers-wallpaper-array-wallwuzz-hd-wallpaper-2830.jpg" height="214" width="321">
       </li>

      </ul>
   </div>
</div>


setInterval(function () {
  var xyPosition_05 = $("#img_wrapper_05").position();
  var next_X_Position = xyPosition_05.left + 321;
  next_X_Position = '-' + next_X_Position + 'px'
  $("#img_wrapper_05").animate({ left: next_X_Position }, 1000);
},5000);

CSS：

  .highlight_Block {
   float:left;
   width:321px;
   height:300px;
   margin-left:15px;
   margin-top:15px;
   background-color:aliceblue;

  }

  #FeaturesList_Ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
 }


.FeaturesList_li{
 display:inline-block;
 }


 #img_wrapper_05 {
 width:auto;
 height:214px;
 position:absolute;
 background-color:green;
 }
4

3 回答 3

5

在第二次迭代中，左值得到两个-- 

setInterval(function () {
    var xyPosition_05 = $("#img_wrapper_05").position();

    var next_X_Position = xyPosition_05.left + 321;

    next_X_Position = (next_X_Position<0? next_X_Position : -next_X_Position) + 'px'


    $("#img_wrapper_05").animate({ left: next_X_Position }, 1000);

},5000);

演示：小提琴

于 2013-07-29T09:53:56.777 回答
0

没有理由相信 setInterval 不起作用。如果您的图像没有滑动，可能是因为错误的 CSS。

第 1 步：添加警报以查看它是否正在进入 setInterval 函数。

alert("setInterval Entered");

第 2 步：如果您每 5 秒收到一次警报，这不是 JavaScript 问题。尝试这个

var next_X_Position = xyPosition_05.left - 321;
next_X_Position = next_X_Position + 'px';

第一次尝试后，左属性的值已经是负数。

于 2013-07-29T10:17:12.263 回答
0

动画后，只需使用以下代码将 div 设置为默认位置：

 $("#img_wrapper_05").css('property','value');

而已！:)

于 2013-07-29T10:00:06.320 回答