在 div 中显示图像并每 5 秒旋转一次

Question

我需要使用 jquery 设计基本图像滑块，以在宽度 (312px X 214px) 的 div 中显示图像。页面加载时，循环显示图像连续；每 5 秒从左向右滑动一次。

在 FeaturedPropertyImgSlider 函数中，我可以使用 jquery 动画将 div 向左滑动，但只能滑动一次。????

非常感谢提前

HTML

<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="/photos/demo1-000001-p-w-1.jpg" height="214" width="321">
           </li>

           <li id="DEMO1_000002" class="FeaturesList_li">
              <img src="/photos/demo1-000001-p-w-2.jpg" height="214" width="321">
           </li>

           <li id="DEMO1_000003" class="FeaturesList_li">
              <img src="/photos/demo1-000001-p-w-3.jpg" height="214" width="321">
           </li>

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

jQuery

​​>

$("#FeaturesList_Ul").append("<li id=" + featured_prop.prop_list[index] + " class='FeaturesList_li'><img src='" + featured_prop.prop_img_url[index] + "' height='214' width='321' /></li>");

调用函数运行滑块

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

#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;
}

Answer 1

制作滑块的问题比您想象的要复杂。对于这样一个简单的任务，除非你有很好的 jQuery 技能，否则从头开始编写它是大材小用的。我推荐循环插件

http://jquery.malsup.com/cycle/

结帐“向左滚动”我相信这就是你想要的：

http://jquery.malsup.com/cycle/browser.html

---

那么它应该类似于

$('#FeaturesList_Ul').cycle({
    fx:      'scrollLeft', 
    speed:    300, 
    timeout:  2000 
});

您可能需要稍微修改一下您的 CSS。祝你好运！