圖像不滑動

Question

我有，我有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不增加 父DIV和我認爲」爲什麼我的圖片在這裏沒有滑動 是我的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庫？這個例子正在工作。

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(); 
 
    });

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

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')點擊事件你在忘記 - [R應該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 
 
\t \t var autoSlide; 
 
    function slideImges(){ 
 
     \t 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 
 
    \t slideImges(); 
 
    }); 
 

 
    $('.prev').click(function() { 
 
     clearInterval(autoSlide); 
 
     currentIndex -= 1; 
 
     if (currentIndex < 0) { 
 
     currentIndex = itemAmt - 1; 
 
     } 
 
     cycleItems(); 
 
     // Call setInterval function here 
 
    \t 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>