使用 jQuery 移动幻灯片放映答案

【问题标题】：Moving a slide show using jQuery使用 jQuery 移动幻灯片放映
【发布时间】：2018-03-25 17:02:17
【问题描述】：

我想自动制作幻灯片电影，但我想在 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>

【问题讨论】：

请显示您当前拥有的脚本，但它不起作用。其他人可以很容易地从中改进，你可以指出你的错误。
好的，这是css中的东西，从一张幻灯片到另一张幻灯片就像从幻灯片到另一张幻灯片一样转换： translate3d(-2017px, 0px, 0px);在幻灯片 2 中变换： translate3d(-2698px, 0px, 0px); qjuery 中有没有办法进行自动转换
你看过existing codepens吗？
@rawandferyad 您可以按照您的建议使用 CSS，也可以将 jQuery Animate 与其他项目一起使用。这实际上取决于您希望轮播或幻灯片放映做什么。基本上，您正在“显示”一个图像，然后将其滑出视口（或屏幕外）并将下一个图像滑入视图。您可以将每个 width 的动画从 100% 变为 0%，或者以负向方式移动它的左边距。很多方法。
你能给我举个例子吗，但是silde应该从左到右移动

标签： jquery html css jquery-ui

【解决方案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

【讨论】：

【解决方案2】：

正如我所评论的，实际上有很多方法可以做到这一点，我无法描述它。如果您想要一个基本的幻灯片放映，其中图像从右向左滑动，有一些简单的方法可以做到这一点。在您的 OP 中，您没有提及是否要在时间或事件上使用此功能，请舔 click，以触发下一张图像。因此，在以后的帖子中，您必须更加具体。

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

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

这是您可以考虑的示例。它完成以下工作：

使用 HTML <div> 元素来包装图像被订购用于轮播
在 click 事件中移动到下一张幻灯片以获取 Next 和 Back 指示器
基本slide 在屏幕上从右到左缓动

$(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");
    }
  });
});

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

<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>

【讨论】：