Question

我需要制作两个单独的幻灯片，无论如何都会自动更改图像，但两个幻灯片中的图像不应同时存在。

我添加了一个小函数来检查这个，如果两个图像都是相同的，我按顺序遍历了我的订单。

不幸的是我的功能并没有一直在运行，但只有在选择了第一个图像并且它与第二个图像中的图像不匹配之后，它才会执行任何操作。

每当目前显示的图像彼此匹配时，我需要运行我的函数，如果它确实改变了其中一个图像。这是我的简单代码：

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");

    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); // Change image every 2 seconds
}

var slideIndex1 = 0;
showSlides1();

function showSlides1() {
    var i;
    var slides = document.getElementsByClassName("mySlides1");

    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slideIndex1++;
    if ((slideIndex1> slides.length)&&$('.mySlides img').attr('src')==$('.mySlides1 img').attr('src')) {slideIndex1 = 1}

    slides[slideIndex1-1].style.display = "block";

    setTimeout(showSlides1,2000); // Change image every 2 seconds

}
if($('.mySlides img').attr('src')==$('.mySlides1 img').attr('src'))
        slideIndex1++;

Answer 1

不使用两个功能，只使用一个来显示两者的图像。

    <script>
    var slideIndex = 0;
    var maximum = 2;
    var minimum = 0;
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var slides1 = document.getElementsByClassName("mySlides1");; 

    $(".mySlides").css('display','none');
    $(".mySlides1").css('display','none');


    var randomnumber1;
    var randomnumber2;

    showSlides();

    function showSlides() {

        randomnumber1 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;

       // run this loop until randomnumber1 is different than randomnumber2
        do {
            randomnumber2 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
        } while(randomnumber1 === randomnumber2);

       console.log(randomnumber1 + "," + randomnumber2);

        $(".mySlides").css('display','none');
        $(".mySlides1").css('display','none');

        slides[randomnumber1].style.display = "block";

        slides1[randomnumber2].style.display = "block";

        setTimeout(showSlides, 2000); // Change image every 2 seconds
    }
</script>

希望这会有所帮助......

Answer 2

您可以做几件事。以下是我的想法：

我并不急于创建两个基本相同的功能。我建议创建一个循环遍历每个.slideshow-container的函数，找到正在显示的第n个孩子，隐藏它们，然后显示下一个孩子。一旦您遍历每个.slideshow-container并显示下一个img，请检查img src是否相同。如果是这样，请撞击其中一个容器的孩子。

但是...

由于两个幻灯片同时进行迭代，我使用的方法（因为代码要少得多）就是用一个图像创建你的div并给它分配一个id。我改变了小提琴的宽度：

<div class="slideshow-container">
  <div class="mySlides fade">
    <img id="image1" class="slideshow-image" style="width: 300px;">
  </div>
</div>
<div class="slideshow-container" style="margin-top:0px;border:1px red solid">
  <div class="mySlides1 fade">
    <img id="image2" class="slideshow-image" style="width: 300px;">
  </div>
</div>

然后，将所有img源放入一个数组中，并为每个图像分配一个起始索引（为show添加更多图片）。另外，附加存储索引的data元素：

var slides = [
    'http://www.newsread.in/wp-content/uploads/2016/06/Images-13.jpg',
    'http://free.clipartof.com/176-Free-Cartoon-Owl-Clipart.jpg',
    'http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg',
    'http://cdn-2.butterflypictures.net/images/14-free-butterfly-clip-art-l.jpg',
    'http://www.newsread.in/wp-content/uploads/2016/06/Images-3.jpg',
    'http://images.clipartpanda.com/offense-clipart-jRiGGgAcL.gif'
];

$('#image1').attr('src', slides[0]);
$('#image1').data('index', 0);
$('#image2').attr('src', slides[Math.floor(slides.length / 2)]);
$('#image2').data('index', Math.floor(slides.length / 2));

然后，创建一个循环遍历每个img的函数（通过类slideshow-image）并将其迭代到下一个索引。你已经包含了jQuery，所以这个函数也使用它。

function showSlides() {
    setInterval(function() {
    $('.slideshow-image').each(function(iter) {
      $this = $(this);
      var newIndex = ($this.data('index') + 1) % slides.length;
      // iterate the image
      $this.attr('src', slides[newIndex]);
      // set the new index
      $this.data('index', newIndex);
    });
  }, 2000);
}

那就是它。我已经把时间遗漏了，但你可以随心所欲地设计它。请记住，小提琴显示图像在不同时间加载，但这是因为它们的来源img相当大。我不希望你这样做。

以下是更新后的fiddle。

自动幻灯片显示多个图像，没有重复

2 个答案: