Question

我正在使用一个函数来迭代图像，从而产生淡入淡出效果。问题是间隔不是查看底部设置的ID，而是只花时间设置最后一个间隔而不是每个ID查看ID间隔，它们都在同一时间发生变化。

我不确定是否应将其包装在单独的ID中或将其包含在课程旁边。

JS

function slideSwitch() {

              $(".slideshow").each(function () {
                  var $active = $(this).find(".active");
                  if ($active.length == 0) {
                      $active = $(this).find("IMG:last");
                  }
                  var $next = $active.next().length ? $active.next() : $(this).find("IMG:first");

                  $active.addClass('last-active');

                  $next.css({
                      opacity: 0.0
                  })
                      .addClass('active')
                      .animate({
                      opacity: 1.0
                  }, 1000, function () {
                      $active.removeClass('active last-active');
                  });
              });
          }

          $(function () {
              setInterval("slideSwitch('#slide1')", 5000);
              setInterval("slideSwitch('#slide2')", 6000);
              setInterval("slideSwitch('#slide3')", 5000);
          });

CSS

.slideshow {
    position:relative;
    height:350px;
}
.slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}
.slideshow IMG.active {
    z-index:10;
}
.slideshow IMG.last-active {
    z-index:9;
}

HTML

                         <div class="slideshow" id="slide1">

                          <img src="images/chelsey.png" alt="" class="active"/>
                          <img src="images/rob.png" alt="" />
                          <img src="images/chris.png" alt="" />
                          <img src="images/alex.png" alt="" />

                         </div>


                          <a href="#">

                             <div class="slideshow" id="slide2">

                              <img src="images/ross.png" alt="" class="active"/>
                              <img src="images/miryam.png" alt="" />
                              <img src="images/jo.png" alt="" />
                              <img src="images/katie.png" alt="" />

                             </div>
                            </a>

                </div>

Answer 1

首先你的slideSwitch没有接受任何参数，然后在间隔的每个slideSwitch调用中，你更新每个滑块。你不认为你应该只更新一个滑块吗？

function slideSwitch(slider) {    
    var $active = $(slider).find(".active");
    if ($active.length == 0) {
        $active = $(slider).find("IMG:last");
    }
    var $next = $active.next().length ? $active.next() : $(slider).find("IMG:first");

    $active.addClass('last-active');

    $next.css({
        opacity: 0.0
    })
    .addClass('active')
    .animate({
        opacity: 1.0
    }, 1000, function () {
        $active.removeClass('active last-active');
    });
}

我想补充说你正在以错误的方式使用setInterval。它可以工作但你应该传递一个函数的引用，如：

setInterval(slideSwitch, 1000);

除非你的情况是你传递参数，所以你应该使用匿名函数：

setInterval(function(){
    slideSwitch('#slide1');
}, 1000);

http://jsfiddle.net/vhcnvsjL/1/

修改

甚至更好，因为你正在使用jQuery（为什么不使用它的全部优点？），你可以创建一个你称之为$('#slide1').slider(1000);的插件

像这样创建插件：

$.fn.slider = function(interval) { var slider = this; // rest of the code here });

fn是javascript中prototype的别名，slider是函数的名称，this是函数应该生效的元素。

http://jsfiddle.net/mzxgh18k/1/

幻灯片放映的间隔时间不起作用

1 个答案: