Question

我一直在打破这个问题，我试图在页面上放置多个图像滑块，但似乎无法让它工作。这个滑块确实有效但是当我复制滑块以添加更多时，然后当您单击滑动图像滑块时，所有其他滑块都会受到影响，导致它们全部滑动，我试图在您点击该滑块时这样做仅适用于该滑块的滑块不是全部。

如果您需要更多代码或更多解释，请告诉我，我会更乐意提供更多。

*旁注 - 我尝试过使用“$（this）”但不起作用我只是因为我没有正确使用它，尽管我之前在其他项目中使用过它。

 function changeSlide(direction){

            var currentImg = $('.active');
            
            var nextImg = currentImg.next();
            
            var prevImg = currentImg.prev();
            
            if(direction == 'next'){
                if(nextImg.length)
                    nextImg.addClass('active');
    
                else
                    $('.NxtImg1 img').first().addClass('active');
            } else{
                if (prevImg.length)
                    prevImg.addClass('active');
                else 
             $('.NxtImg1 img').last().addClass('active');
            }
            
            currentImg.removeClass('active');
        }

  
                .injuryimg{
                    width: 100%;
                    height: auto;
                    display: flex;
                    flex-wrap: wrap;
                }
                .prev{
                    margin: 0px auto;
                    margin-left: 0px;
                    padding: 8px 5px;
                    background: #555;
                    color: #fff;
                    display: inline-block;
                    width: fit-content;
                    height: auto;
                    cursor: pointer;
                }
                .next{
                    margin: 0px auto;
                    margin-right: 0px;
                    padding: 8px 5px;
                    background: #555;
                    color: #fff;
                    display: inline-block;
                    width: fit-content;
                    height: auto;
                    cursor: pointer;
                }

                
                .NxtImg1{
                    width: 100%;
                    height: 300px;
                    display: block;
                    overflow: hidden;
                }

                
                .NxtImg1 img{
                    width: 100%;
                    height: auto;
                    display: none;

                }

                .NxtImg1 img.active{
                    display: block;
                    width: 100%;
                    height: auto;

                }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  class="injuryimg">
                <div class="NxtImg1">
                    <img class="active" src="https://image.shutterstock.com/z/stock-photo-white-empty-information-mock-up-on-city-bus-stop-blank-vertical-billboard-near-paved-road-with-red-653925340.jpg">
                    <img src="https://image.shutterstock.com/z/stock-photo-glass-city-bus-stop-with-mock-up-of-information-poster-vertical-blank-billboard-near-road-empty-656736946.jpg">
                    <img src="https://image.shutterstock.com/z/stock-photo-horizontal-blank-information-banner-standing-near-wooden-stage-empty-mock-up-of-poster-in-urban-741343954.jpg">
                </div>
                <a class="prev" onclick="changeSlide('prev')">Prev</a><a class="next" onclick="changeSlide('next')" >Next</a>
            </div>

  <div  class="injuryimg">
                <div class="NxtImg1">
                    <img class="active" src="https://image.shutterstock.com/z/stock-photo-white-empty-information-mock-up-on-city-bus-stop-blank-vertical-billboard-near-paved-road-with-red-653925340.jpg">
                    <img src="https://image.shutterstock.com/z/stock-photo-glass-city-bus-stop-with-mock-up-of-information-poster-vertical-blank-billboard-near-road-empty-656736946.jpg">
                    <img src="https://image.shutterstock.com/z/stock-photo-horizontal-blank-information-banner-standing-near-wooden-stage-empty-mock-up-of-poster-in-urban-741343954.jpg">
                </div>
                <a class="prev" onclick="changeSlide('prev')">Prev</a><a class="next" onclick="changeSlide('next')" >Next</a>
            </div>

Answer 1

它会更改两个滑块，因为这将同时定位两个幻灯片：

var currentImg = $（'。active'）;

相反，您应该使用点击处理程序中的事件来找出要更改图像的事件。

Answer 2

您需要将单击的元素传递给您的函数，这样您才能找到与您所在容器有关的元素

function changeSlide(currentElem, direction) {

  var $container = $(currentElem).closest('.injuryimg');  // find the closest parent container to the button that has been clicked with this class
  var currentImg = $container.find('.active');    // only get the active image within that container
  var nextImg = currentImg.next();
  var prevImg = currentImg.prev();

  if (direction == 'next') {
    if (nextImg.length)
      nextImg.addClass('active');
    else
      $container.find('img').first().addClass('active');
  } else {
    if (prevImg.length)
      prevImg.addClass('active');
    else
      $container.find('img').last().addClass('active');
  }

  currentImg.removeClass('active');
}

.injuryimg {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}

.prev {
  margin: 0px auto;
  margin-left: 0px;
  padding: 8px 5px;
  background: #555;
  color: #fff;
  display: inline-block;
  width: fit-content;
  height: auto;
  cursor: pointer;
}

.next {
  margin: 0px auto;
  margin-right: 0px;
  padding: 8px 5px;
  background: #555;
  color: #fff;
  display: inline-block;
  width: fit-content;
  height: auto;
  cursor: pointer;
}

.NxtImg1 {
  width: 100%;
  height: 300px;
  display: block;
  overflow: hidden;
}

.NxtImg1 img {
  width: 100%;
  height: auto;
  display: none;
}

.NxtImg1 img.active {
  display: block;
  width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="injuryimg">
  <div class="NxtImg1">
    <img class="active" src="https://image.shutterstock.com/z/stock-photo-white-empty-information-mock-up-on-city-bus-stop-blank-vertical-billboard-near-paved-road-with-red-653925340.jpg">
    <img src="https://image.shutterstock.com/z/stock-photo-glass-city-bus-stop-with-mock-up-of-information-poster-vertical-blank-billboard-near-road-empty-656736946.jpg">
    <img src="https://image.shutterstock.com/z/stock-photo-horizontal-blank-information-banner-standing-near-wooden-stage-empty-mock-up-of-poster-in-urban-741343954.jpg">
  </div>
  <a class="prev" onclick="changeSlide(this, 'prev')">Prev</a><a class="next" onclick="changeSlide(this, 'next')">Next</a>
</div>

<div class="injuryimg">
  <div class="NxtImg1">
    <img class="active" src="https://image.shutterstock.com/z/stock-photo-white-empty-information-mock-up-on-city-bus-stop-blank-vertical-billboard-near-paved-road-with-red-653925340.jpg">
    <img src="https://image.shutterstock.com/z/stock-photo-glass-city-bus-stop-with-mock-up-of-information-poster-vertical-blank-billboard-near-road-empty-656736946.jpg">
    <img src="https://image.shutterstock.com/z/stock-photo-horizontal-blank-information-banner-standing-near-wooden-stage-empty-mock-up-of-poster-in-urban-741343954.jpg">
  </div>
  <a class="prev" onclick="changeSlide(this, 'prev')">Prev</a><a class="next" onclick="changeSlide(this, 'next')">Next</a>
</div>

Answer 3

使用jQuery附加滑块功能会保留this并使$(this)成为可能。使用closest查找具有所需过滤条件的超级元素。

function changeSlidePrev(){
    var $parent = $(this).closest('.NxtImg1');
    var currentImg = $parent.find('.active');
    var prevImg = currentImg.prev();

    if (prevImg.length)
        prevImg.addClass('active');
    else 
        $parent.find('img').last().addClass('active');

    currentImg.removeClass('active');
}

function changeSlideNext(){
    var $parent = $(this).closest('.NxtImg1');
    var currentImg = $parent.find('.active');

    var nextImg = currentImg.next();
        if(nextImg.length)
            nextImg.addClass('active');
        else
            $parent.find('img').first().addClass('active');

    currentImg.removeClass('active');
}

$(document.body).on('click','.prev', changeSlidePrev);
$(document.body).on('click','.next', changeSlideNext);

//and remove changeslide from <a class="prev" onclick="changeSlide('prev')">Prev</a> etc.

添加多个jquery图像滑块

3 个答案: