Question

我想自动制作幻灯片电影，但我想在jQuery中完成。不幸的是我的知识在jQuery中很低。

这是我的HTML：

 <div id="smallgal" class="event-carousel owl-carousel">
                            <div class="ec-box">
                                <img src="img/home1/event-banner.jpg" alt="">
                                <div class="timer-area">
                                    <div data-countdown="2017/10/16"></div>
                                </div>
                            </div>
                            <div class="ec-box">
                                <img src="img/home1/event-banner.jpg" alt="">
                                <div class="timer-area">
                                    <div data-countdown="2017/10/1"></div>
                                </div>
                            </div>
                            <div class="ec-box">
                                <img src="img/home1/event-banner.jpg" alt="">
                                <div class="timer-area">
                                    <div data-countdown="2017/10/30"></div>
                                </div>
                            </div>
                        </div>

Answer 1

是的，这很简单，你可以自动幻灯片放映

迭代您div中的所有图片

使用Setinterval方法淡入和淡出图像。

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
},  3000);

我的小提琴：Jquery move automatically slide show

Answer 2

正如我评论的那样，有很多方法可以做到这一点，我无法形容它。如果您想要一个基本的幻灯片放映，图像从右向左滑动，有一些简单的方法可以做到这一点。在你的OP中，你没有提到你是想在时间上还是在一个事件上，舔click来触发下一个图像。因此，在未来的帖子中，您必须具有更多特定性。

请查看：https://stackoverflow.com/help/mcve

你也没有发布任何JavaScript或jQuery代码来帮助你，这是Stack Overflow的另一个失礼。

以下是您可以考虑的示例。它完成以下任务：

使用HTML <div>元素包装为carousel订购的图像
转到click事件的下一张幻灯片，用于下一步和后退指示符
基本slide在屏幕上从右到左缓和

＆＃13;

$(function() {
  $(".back, .next").click(function(e) {
    var target = $(this);
    if (target.hasClass("next")) {
      var l = $(".slide-wrapper").css("margin-left");
      l = parseInt(l.slice(0, -2));
      var w = $(".ec-box").eq(0).width();
      $(".slide-wrapper").animate({
        marginLeft: (l - w) + "px"
      }, "fast");
    }
    if (target.hasClass("back")) {
      var l = $(".slide-wrapper").css("margin-left");
      l = parseInt(l.slice(0, -2));
      var w = $(".ec-box").eq(0).width();
      $(".slide-wrapper").animate({
        marginLeft: (l + w) + "px"
      }, "fast");
    }
  });
});

＆＃13;

.widget-wrapper {
  position: relative;
}

span.back {
  margin-top: 150px;
  position: absolute;
  top: 0;
  left: 10px;
}

span.next {
  margin-top: 150px;
  position: absolute;
  top: 0;
  left: 350px;
}

.event-carousel {
  width: 300px;
  height: 280px;
  overflow: hidden;
  margin: 20px 40px;
}

.event-carousel .ec-box {
  display: inline-block;
  margin: 0;
  padding: 0;
  float: left;
}

＆＃13;

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="widget-wrapper">
  <span class="back ui-icon ui-icon-caret-1-w" title="Previous Slide"></span>
  <div id="smallgal" class="event-carousel owl-carousel">
    <div class="slide-wrapper">
      <div class="ec-box">
        <img src="https://dummyimage.com/300x280/fcc/fff.jpg&text=Image+1" alt="">
        <div class="timer-area">
          <div data-countdown="2017/10/16"></div>
        </div>
      </div>
      <div class="ec-box">
        <img src="https://dummyimage.com/300x280/cfc/fff.jpg&text=Image+2" alt="">
        <div class="timer-area">
          <div data-countdown="2017/10/1"></div>
        </div>
      </div>
      <div class="ec-box">
        <img src="https://dummyimage.com/300x280/ccf/fff.jpg&text=Image+3" alt="">
        <div class="timer-area">
          <div data-countdown="2017/10/30"></div>
        </div>
      </div>
    </div>
  </div>
  <span class="next ui-icon ui-icon-caret-1-e" title="Next Slide"></span>
</div>

＆＃13;

使用jQuery移动幻灯片放映

2 个答案: