我如何使這個自動播放？

我是新來的Jquery和幾乎80％的這不是我的代碼我只是用它來學習如何使滑塊，但我會很感激，如果有人可以幫助我告訴我我能做些什麼在頁面加載的時候，使該滑塊自動工作。另外，當slide_index == 16時，可以做到這一點，幻燈片將正常旋轉，而不是向後旋轉，直到第一張圖像。感謝：P我如何使這個自動播放？

HTML：

<html> 
<body> 
<div class="slider"> 
<ul> 
    <li> 
     <img src="img1.jpg" /> 
    </li> 
    <li> 
     <img src="img2.jpg" /> 
    </li> 
    <li> 
     <img src="img3.jpg" /> 
    </li> 
    <li> 
     <img src="img4.jpg" /> 
    </li> 
    <li> 
     <img src="img5.jpg" /> 
    </li> 
    <li> 
     <img src="img6.jpg" /> 
    </li> 
    <li> 
     <img src="img7.jpg" /> 
    </li> 
    <li> 
     <img src="img8.jpg" /> 
    </li> 
    <li> 
     <img src="img9.jpg" /> 
    </li> 
    <li> 
     <img src="img10.jpg" /> 
    </li> 
    <li> 
     <img src="img11.jpg" /> 
    </li> 
    <li> 
     <img src="img12.jpg" /> 
    </li> 
    <li> 
     <img src="img13.jpg" /> 
    </li> 
    <li> 
     <img src="img14.jpg" /> 
    </li> 
    <li> 
     <img src="img15.jpeg" /> 
    </li> 
    <li> 
     <img src="img16.jpg" /> 
    </li> 
    <li> 
     <img src="img17.jpg" /> 
    </li> 
</ul> 
<button class="prev">Prev</button> 
<button class="next">Next</button> 
</div> 
</div> 
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="slider.js"></script> 
</body> 
</html>

CSS：

.slider { 
width: 60%; 
overflow: hidden; 
height: 607px; 
position: relative; 
border: 5px #000000 solid; 
margin-left: 20%; 
} 

.slider ul { 
margin: 0; 
padding: 0; 
list-style: none; 
position: absolute; 
width: 1700%; 
height: 100%; 
top: 0; 
} 

.slider li { 
padding: 0; 
margin: 0; 
width: 33.333333%; 
height: 100%; 
overflow: hidden; 
position: absolute; 
top: 0; 
bottom: 0; 
} 

.slider li img { 
border: none; 
width: 100%; 
min-height: 100%; 
} 
.slider button { 
position: absolute; 
display: block; 
box-sizing: border-box; 
border: none; 
outline: none; 
top: 0; 
bottom: 0; 
width: 13%; 
background-color: rgba(0, 0, 0, 0.3); 
color: #fff; 
margin: 0; 
padding: 0; 
text-align:center; 
opacity: 0; 
z-index: 2; 
height: 100%; 
} 

.slider button.prev { 
left: 0; 
font-size: 30px; 
} 

.slider button.next { 
right: 0; 
font-size: 30px; 
} 

.slider button:hover, .slider button:active { 
opacity: 1.0;

}

JQuery的：

$(function() { 

var ul = $(".slider ul"); 
var slide_count = ul.children().length; 
var slide_width_pc = 100.0/slide_count; 
var slide_index = 0; 

ul.find("li").each(function(indx) { 
var left_percent = (slide_width_pc * indx) + "%"; 
$(this).css({"left":left_percent}); 
$(this).css({width:(100/slide_count) + "%"}); 
}); 

setInterval(function() { 
    console.log("prev button clicked"); 
    slide(slide_index - 1); 
    } 

    function() { 
    slide(slide_index + 1); 
    if (slide_index == 16) { 
     slide(slide_index == 0); 
     ul.animate({ 
     "margin-left": margin_left_pc; 
     }, 400); 
    } 
    },500); 

function slide(new_slide_index) { 

if(new_slide_index < 0 || new_slide_index >= slide_count) return; 

var margin_left_pc = (new_slide_index * (-100)) + "%"; 

ul.animate({"margin-left": margin_left_pc}, 400, function() { 

slide_index = new_slide_index 

}); 
} 
});

來源

2016-09-17 Sonnie Thomas

幻燈片固定寬度的復位定時器？ – Ivan

我不知道如何改變這個東西我是新來的Jquery，隨意評論一些更好的代碼，使自動圖像滑塊：P我真的很感激，我無法找到很多關於這個話題只是使用網站的幫助。 –

主要思想：在setInterval內改變ul（index * liWidth）的'left'位置，當index == 16使其變爲0 – Ivan

看fiddle

使用setInterval開始滑動，並clearInterval + setInterval點擊後

來源

2016-09-19 18:40:19 Ivan

第一個問題：根據我的理解，即使沒有單擊按鈕，您也希望自動滑動滑塊。對於您要創建的時間間隔：

var sliderInterval = setInterval(function() { moveRight(); }, 3000);

3000這裏等於3秒，隨意定製。

來源

2016-09-17 15:42:49 BlueBockser

感謝您的時間，但我發佈了錯誤的代碼位，我沒有再使用它了。但是，謝謝:) –

那麼，你基本上可以保持代碼行。你應該只在''.next'「按鈕被點擊的時候交換'moveRight（）;'。 – BlueBockser

變化：

$(".slider .prev").click(function() { 
console.log("prev button clicked"); 
slide(slide_index - 1); 
}); 

$(".slider .next").click(function() { 
slide(slide_index + 1); 
if (slide_index == 16){ 
slide(slide_index == 0); 
ul.animate({"margin-left": margin_left_pc}, 400); 
} 
});

要：

setInterval(function() { 
    console.log("prev button clicked"); 
    slide(slide_index - 1); 
    } 

    function() { 
    slide(slide_index + 1); 
    if (slide_index == 16) { 
     slide(slide_index == 0); 
     ul.animate({ 
     "margin-left": margin_left_pc 
     }, 400); 
    } 
    },500);

我做了什麼，而不是把功能被點擊上滑蓋時運行，我做了它運行的功能每半秒鐘。要更改每張幻燈片更改之前的時間量，您需要更改第二個括號中第500個數字。希望這有助於。

來源

2016-09-17 16:30:58 Joshua

嘿，感謝您的時間和幫助！但是，它似乎並沒有工作。我應該發佈我的整個代碼（HTML，CSS和Jquery）嗎？ –

是的，如果你可以發佈你的html也會有幫助。您可以將其編輯爲原始文章。 – Joshua

做到了。順便我真的很感謝你的時間和幫助:) –

我如何使這個自動播放？

回答

相關問題