Question

我有一个父div，其中我有3个子div，每个包含一个图像这是HTML代码

<div class="container" >
<div style="display: inline-block; ">
<img src="../Images/t-shirt1.jpg"/>
</div>
<div >
<img src="../Images/ata1.jpg"/>
</div>
<div>
<img src="../Images/ata3.jpg"/>
</div>
</div>

问题是我的currentIndex没有增加我认为'为什么我的图像没有滑动这是我的jQuery代码

 var currentIndex = 0;
      items = $('.container div');
      console.log("Recieved images"+items);
      itemAmt = items.length;
      console.log("Calculate"+itemAmt);
    function cycleItems() {
      var item = $('.container div').eq(currentIndex);
      console.log("next item");
      items.hide();
      console.log("next");
      item.css('display','inline-block');
    }

    var autoSlide = setInterval(function() {
      currentIndex += 1;
      console.log("Interval start"+currentIndex);
      if (currentIndex > itemAmt - 1) {
        currentIndex = 0;
      }
      cycleItems();
    }, 3000);

    $('.next').click(function() {
      cleaInterval(autoSlide);
      currentIndex += 1;
      console.log("Interval start");
      if (currentIndex > itemAmt - 1) {
        currentIndex = 0;
        console.log("Interval start loop");
      }
      cycleItems();
    });

    $('.prev').click(function() {
      clearInterval(autoSlide);
      currentIndex -= 1;
      if (currentIndex < 0) {
        currentIndex = itemAmt - 1;
      }
      cycleItems();
    });

Answer 1

你是否包含了jQuery库？这个例子正在运作。

＆＃13;

 var currentIndex = 0;
      items = $('.container div');
      console.log("Recieved images"+items);
      itemAmt = items.length;
      console.log("Calculate"+itemAmt);
    function cycleItems() {
      var item = $('.container div').eq(currentIndex);
      console.log("next item");
      items.hide();
      console.log("next");
      item.css('display','inline-block');
    }

    var autoSlide = setInterval(function() {
      currentIndex += 1;
      console.log("Interval start"+currentIndex);
      if (currentIndex > itemAmt - 1) {
        currentIndex = 0;
      }
      cycleItems();
    }, 3000);

    $('.next').click(function() {
      cleaInterval(autoSlide);
      currentIndex += 1;
      console.log("Interval start");
      if (currentIndex > itemAmt - 1) {
        currentIndex = 0;
        console.log("Interval start loop");
      }
      cycleItems();
    });

    $('.prev').click(function() {
      clearInterval(autoSlide);
      currentIndex -= 1;
      if (currentIndex < 0) {
        currentIndex = itemAmt - 1;
      }
      cycleItems();
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" >
<div style="display: inline-block; ">
<img src="https://4.bp.blogspot.com/-ApZE8ishxuw/UFBBZzroNfI/AAAAAAAACDo/7g_sZhGk93A/s1600/stock+photos+free+commercial+use.jpg"/>
</div>
<div >
<img src="https://1.bp.blogspot.com/-SAA6zUJiKNM/UFBBa2LXFqI/AAAAAAAACDs/GawDQtdj3XM/s1600/stock+photos+free+people.jpg"/>
</div>
<div>
<img src="https://1.bp.blogspot.com/-vhFl4oghn_U/UFBBcCaF_EI/AAAAAAAACDw/UlHh4QinHLM/s1600/stock+photos+free+trial.jpg"/>
</div>
</div>

＆＃13;

Answer 2

虽然你的代码对我来说工作正常..我认为你的问题是你单击上一个或下一个按钮后清除setInterval()部分，然后你需要再将它返回..如果我猜对了这个是你的问题..你只需要为setInterval()部分

创建一个函数

// ceate a function for setInterval
    var autoSlide;
    function slideImges(){
        autoSlide = setInterval(function() {
        currentIndex += 1;
        console.log("Interval start"+currentIndex);
        if (currentIndex > itemAmt - 1) {
          currentIndex = 0;
        }
        cycleItems();
      }, 3000);
    }

在$('.next')点击事件中，您忘记了cleaInterval(autoSlide);它应该是clearInterval(autoSlide);

这是一个演示

var currentIndex = 0;
      items = $('.container div');
      console.log("Recieved images"+items);
      itemAmt = items.length;
      console.log("Calculate"+itemAmt);
    function cycleItems() {
      var item = $('.container div').eq(currentIndex);
      console.log("next item");
      items.hide(0);
      console.log("next");
      item.show(0);
    }
    
    // ceate a function for setInterval
		var autoSlide;
    function slideImges(){
      	autoSlide = setInterval(function() {
        currentIndex += 1;
        console.log("Interval start"+currentIndex);
        if (currentIndex > itemAmt - 1) {
          currentIndex = 0;
        }
        cycleItems();
      }, 3000);
    }
    
    // Call setInterval function here
    slideImges();
    
    $('.next').click(function() {
      clearInterval(autoSlide);
      currentIndex += 1;
      console.log("Interval start");
      if (currentIndex > itemAmt - 1) {
        currentIndex = 0;
        console.log("Interval start loop");
      }
      cycleItems();
      // Call setInterval function here
    	slideImges();
    });

    $('.prev').click(function() {
      clearInterval(autoSlide);
      currentIndex -= 1;
      if (currentIndex < 0) {
        currentIndex = itemAmt - 1;
      }
      cycleItems();
      // Call setInterval function here
    	slideImges();
    });

.container div:not(:first-child){
  display : none;
}
.container div img{
  height : 150px;
  width: 350px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" >
  <div style="display: inline-block; ">
  <img src="http://placehold.it/350x150"/>
  </div>
  <div >
  <img src="http://placehold.it/200x100"/>
  </div>
  <div>
  <img src="http://placehold.it/350x150"/>
  </div>
  <div >
  <img src="http://placehold.it/200x100"/>
  </div>
</div>

<button class="prev">Prev</button>
<button class="next">Next</button>

图像不是滑动的

2 个答案: