Question

我刚刚在jQuery中编写了一个简单的幻灯片，我试图在同一页面中运行其中的两个，但现在没有运行，我尝试了.each函数，但我想我可能遇到了问题/ class：

<div id="slideshow">
 <figure id="slideshowMainAttraction">
    <a class="slideshowForward"></a>
    <img src="https://www.blink102.com.br/wp-content/uploads/2017/05/unicornio-viva.jpg" />
  </figure>

  <ul id="slideshowImages">
    <li><img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"></li>
    <li><img src="https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028_960_720.jpg"></li>
    <li><img src="https://www.francetvinfo.fr/image/75ej3m23w-8539/1200/825/13986167.jpg"></li>
  </ul>
</div>

<div id="slideshow">
  <figure id="slideshowMainAttraction">
    <a class="slideshowForward"></a>
    <img src="https://www.blink102.com.br/wp-content/uploads/2017/05/unicornio-viva.jpg" />
  </figure>

  <ul id="slideshowImages">
    <li><img src="https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028_960_720.jpg"></li>
    <li><img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"></li>
    <li><img src="https://www.francetvinfo.fr/image/75ej3m23w-8539/1200/825/13986167.jpg"></li>
  </ul>
</div>

对于jQuery：

$('#slideshow').each(function(e) {

  var list = $(this > '#slideshowImages li');
  var currentItem = 0;

  function changeToSlide(index) {

    var i = index;
    var nextImage = $('#slideshowImages img' + ':eq(' + i + ')').attr('src');

    $('#slideshowMainAttraction img').attr('src', nextImage);
  }

  $('.slideshowForward').click(function() {
    var i = currentItem;
    if (i < (list.length - 1)) {
      changeToSlide(i + 1);
      currentItem += 1;
    } else {
      changeToSlide(0);
      currentItem = 0;
    }
  });

  changeToSlide(0);

});

https://jsfiddle.net/Fromager/9stsvsxo/

Answer 1

这是演示如何操作的示例，我稍微改变了一下

＆＃13;

var imageURL1 = [
    "https://www.blink102.com.br/wp-content/uploads/2017/05/unicornio-viva.jpg",
    "https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028_960_720.jpg",
    "https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg",
    "https://www.francetvinfo.fr/image/75ej3m23w-8539/1200/825/13986167.jpg"
]
var imageURL2 = [
    "https://www.francetvinfo.fr/image/75ej3m23w-8539/1200/825/13986167.jpg",
    "https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg",
    "https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028_960_720.jpg",
    "https://www.blink102.com.br/wp-content/uploads/2017/05/unicornio-viva.jpg"
]

// slideshow1 using imageURL1
// slideshow2 using imageURL2
var imageURLs = [imageURL1, imageURL2]

$('.slideshowForward').click(function() {
    // find the index of .slideshowForward from all .slideshow .slideshowForward
    var index = $(this).index('.slideshow .slideshowForward')
    
    var img = $(this).siblings('img'); // find <img>

    // get the img's src and find the index from imageURLs[index]
    var i = imageURLs[index].findIndex(url => url==img.attr('src'));

    // setting next img
    img.attr('src', imageURLs[index][(i+1)%imageURLs[index].length])
});

＆＃13;

.slideshow {
  display: inline-block;
  width: 81vw;
}

.slideshow img {
  width: 100%;
}

.slideshowImages {
  display: none;
}

.slideshowMainAttraction {
  display: block;
  position: relative;
}

a.slideshowForward {
  z-index: 1;
  position: absolute;
  height: 100%;
  width: 81vw;
}

a.slideshowForward:hover {
  cursor: e-resize;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow">
    <figure class="slideshowMainAttraction">
        <a class="slideshowForward"></a>
        <img src="https://www.blink102.com.br/wp-content/uploads/2017/05/unicornio-viva.jpg" />
    </figure>
</div>

<div class="slideshow">
    <figure class="slideshowMainAttraction">
        <a class="slideshowForward"></a>
        <img src="https://www.blink102.com.br/wp-content/uploads/2017/05/unicornio-viva.jpg" />
    </figure>
</div>

＆＃13;

jQuery中的一个页面中有多个简单的幻灯片

1 个答案: