同时播放两个幻灯片

时间：2018-09-06 07:18:47

标签： javascript html css

我正在努力使两者幻灯片在相同的时间播放。

我每个人都需要一个单独的JavaScript吗？所有作为单独幻灯片放映的图像都位于<div>类的instagram-slideshow中。如何在一页上进行多个自动幻灯片放映？

$(document).on('click', 'a[href^="#"]', function(event) {
  event.preventDefault();

  $('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, 500);
});

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("slide");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  slides[slideIndex - 1].style.display = "block";
  setTimeout(showSlides, 2000);
}

(function($) {
  $.fn.visible = function(partial) {

    var $t = $(this),
      $w = $(window),
      viewTop = $w.scrollTop(),
      viewBottom = viewTop + $w.height(),
      _top = $t.offset().top,
      _bottom = _top + $t.height(),
      compareTop = partial === true ? _bottom : _top,
      compareBottom = partial === true ? _top : _bottom;

    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

  };

})(jQuery);

var win = $(window);

var allModifications = $(".half-width-content");


//make all elements visible that are directly visible
allModifications.each(function(i, el) {
  var el = $(el);
  if (el.visible(true)) {
    alert();
    el.find(".half-width-text").addClass("open");
  }
});


//make elements visible that get scrolled into the viewport
win.scroll(function(event) {

  allModifications.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.find(".half-width-text").addClass("open");
    }
  });

});
body {
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  height: 100vh;
}

.container>div {
  min-height: 100vh;
  border: 1px solid black;
  box-sizing: border-box;
}

.container>div>a>.dot {
  position: relative;
  transition: background .2s linear;
  left: 50%;
  bottom: 10%;
  z-index: 101;
  height: 25px;
  width: 25px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
}

.container>div>a>.dot>.arrow-down {
  transition: border .2s linear;
  position: absolute;
  top: 11%;
  left: 24%;
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
}

.container>div>a .dot:hover {
  background: black;
}

.container>div>a .dot:hover>.arrow-down {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
}

.container>div>a>.dot>.arrow-down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.container>div .content {
  height: 100vh;
  width: 100vw;
}

.full-width {
  width: 100%;
}

.half-width {
  width: 50%;
}

div>.content {
  background: green;
}

.video-iframe.fullsize {
  height: 100%;
  width: 100%;
}

.list {
  list-style: none;
  text-align: center;
}

.half-width>.half-width-content {
  position: relative;
  margin-top: 0;
  height: 100%;
  width: 100%;
}

.half-width>.half-width-content>.instagram-slideshow {
  position: relative;
  height: 100%;
  width: 100%;
}

.half-width>.half-width-content>.instagram-slideshow>img {
  position: absolute;
  width: 100%;
  height: 100%;
}

.half-width>.half-width-content>.half-width-text {
  position: absolute;
  left: 50%;
  top: 150%;
  visibility: hidden;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: all 1s linear;
}

.half-width>.half-width-content>.half-width-text>h1 {
  text-align: center;
}

.half-width>.half-width-content>.half-width-text.open {
  visibility: visible;
  top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="full-width">
    <!--<iframe class="video-iframe fullsize" src="example_vid_this_snippet_works_except_the_vieo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>-->
    <a href="#section2">
      <span class="dot">
        <i class="arrow-down"></i>
      </span>
    </a>
  </div>
  <div class="half-width" id="section2">
    <div class="half-width-content">
      <div class="half-width-text">
        <h1>This is a headline</h1>
        <div class="text-content">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore</p>
        </div>
      </div>
    </div>
  </div>
  <div class="half-width">
    <div class="half-width-content">
      <div class="instagram-slideshow">
        <img class="slide" src="http://placekitten.com/200/300">
        <img class="slide" src="https://placeimg.com/640/480/animals">
        <img class="slide" src="http://placekitten.com/200/300">
      </div>
    </div>
  </div>
  <div class="half-width">
    <div class="half-width-content">
      <div class="instagram-slideshow">
        <img class="slide" src="https://fakeimg.pl/350x200/?text=Hello">
        <img class="slide" src="https://fakeimg.pl/350x200/?text=Bye">
        <img class="slide" src="https://fakeimg.pl/350x200/?text=BLA">
      </div>
    </div>
  </div>
  <div class="half-width">
    div 4
  </div>
</div>

2 个答案:

答案 0 :(得分：2)

你在这里

$(document).on('click', 'a[href^="#"]', function(event) {
  event.preventDefault();

  $('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, 500);
});

var slideIndex = 0;

// run TWO slideshows, one for each slider
showSlides(0);
showSlides(1);

// give your slider function parameter of index
function showSlides(index) {
  var i;
  // select the particular slider and THEN its slides
  var sliderBlock = document.getElementsByClassName("instagram-slideshow")[index];
  var slides = sliderBlock.getElementsByClassName("slide");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  slides[slideIndex - 1].style.display = "block";
  // after timeout run appropriate function again
  setTimeout(function() {showSlides(index)}, 2000);
}

(function($) {
  $.fn.visible = function(partial) {

    var $t = $(this),
      $w = $(window),
      viewTop = $w.scrollTop(),
      viewBottom = viewTop + $w.height(),
      _top = $t.offset().top,
      _bottom = _top + $t.height(),
      compareTop = partial === true ? _bottom : _top,
      compareBottom = partial === true ? _top : _bottom;

    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

  };

})(jQuery);

var win = $(window);

var allModifications = $(".half-width-content");


//make all elements visible that are directly visible
allModifications.each(function(i, el) {
  var el = $(el);
  if (el.visible(true)) {
    alert();
    el.find(".half-width-text").addClass("open");
  }
});


//make elements visible that get scrolled into the viewport
win.scroll(function(event) {

  allModifications.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.find(".half-width-text").addClass("open");
    }
  });

});
body {
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  height: 100vh;
}

.container>div {
  min-height: 100vh;
  border: 1px solid black;
  box-sizing: border-box;
}

.container>div>a>.dot {
  position: relative;
  transition: background .2s linear;
  left: 50%;
  bottom: 10%;
  z-index: 101;
  height: 25px;
  width: 25px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
}

.container>div>a>.dot>.arrow-down {
  transition: border .2s linear;
  position: absolute;
  top: 11%;
  left: 24%;
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
}

.container>div>a .dot:hover {
  background: black;
}

.container>div>a .dot:hover>.arrow-down {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
}

.container>div>a>.dot>.arrow-down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.container>div .content {
  height: 100vh;
  width: 100vw;
}

.full-width {
  width: 100%;
}

.half-width {
  width: 50%;
}

div>.content {
  background: green;
}

.video-iframe.fullsize {
  height: 100%;
  width: 100%;
}

.list {
  list-style: none;
  text-align: center;
}

.half-width>.half-width-content {
  position: relative;
  margin-top: 0;
  height: 100%;
  width: 100%;
}

.half-width>.half-width-content>.instagram-slideshow {
  position: relative;
  height: 100%;
  width: 100%;
}

.half-width>.half-width-content>.instagram-slideshow>img {
  position: absolute;
  width: 100%;
  height: 100%;
}

.half-width>.half-width-content>.half-width-text {
  position: absolute;
  left: 50%;
  top: 150%;
  visibility: hidden;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: all 1s linear;
}

.half-width>.half-width-content>.half-width-text>h1 {
  text-align: center;
}

.half-width>.half-width-content>.half-width-text.open {
  visibility: visible;
  top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="full-width">
    <!--<iframe class="video-iframe fullsize" src="example_vid_this_snippet_works_except_the_vieo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>-->
    <a href="#section2">
      <span class="dot">
        <i class="arrow-down"></i>
      </span>
    </a>
  </div>
  <div class="half-width" id="section2">
    <div class="half-width-content">
      <div class="half-width-text">
        <h1>This is a headline</h1>
        <div class="text-content">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore</p>
        </div>
      </div>
    </div>
  </div>
  <div class="half-width">
    <div class="half-width-content">
      <div class="instagram-slideshow">
        <img class="slide" src="http://placekitten.com/200/300">
        <img class="slide" src="https://placeimg.com/640/480/animals">
        <img class="slide" src="http://placekitten.com/200/300">
      </div>
    </div>
  </div>
  <div class="half-width">
    <div class="half-width-content">
      <div class="instagram-slideshow">
        <img class="slide" src="https://fakeimg.pl/350x200/?text=Hello">
        <img class="slide" src="https://fakeimg.pl/350x200/?text=Bye">
        <img class="slide" src="https://fakeimg.pl/350x200/?text=BLA">
      </div>
    </div>
  </div>
  <div class="half-width">
    div 4
  </div>
</div>

答案 1 :(得分：1)

请使用Javascript Vanilla（Pure JS）可以单独完成，并且非常简单，这是我编写幻灯片的最简单代码的示例：https://jsfiddle.net/ya3wk9ro/30/，仅需要几行Javascript。< / p>

您当然可以添加一些动画功能，但这是基础。

'
相关问题
最新问题