javascript - 同时放映两个幻灯片不工作

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

最佳答案

给你

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

关于javascript - 同时放映两个幻灯片不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52198509/

上一篇：javascript - 从 1 到 10 的 Onkeypress 数字验证

下一篇：html - 有空格时进度条标签显示不正确

相关文章：

javascript - 你如何动态地添加一个按钮/插件到 TinyMCE？

javascript - 尝试 extjs 5 简单网格面板(示例不起作用)

css - 内联样式导致文本显示在图像之前？

html - 纯 CSS iframe 响应给定比例

html - 图片不尊重我给它的类(class)

javascript - AngularJS 前端和 Spring Framework 后端的最佳构建工具

php - 尝试将 "check availability"选项添加到我的注册表单

html - ipad 上带有 div 的复选框标签不可点击

PHP - 将数据输入 MySQL 单元格

javascript - 将 javascript 更改为 jquery 时按钮值消失

©2024 IT工具网  联系我们