-2
A
回答
0
這裏是一個香草JS旋轉木馬,你可以看看,但正如其他人指出,堆棧溢出不是一個服務來爲你創建你的項目。您需要更多地研究CSS,以便讓旋轉木馬以您想要的方式呈現。
//Changed index so 1 is actually first image, rather than starting at 0 index
var index = 1;
var paused = false;
var slideShow = [];
for (i=0; i<document.getElementsByClassName("slideShow").length; i++) {
slideShow[i] = document.getElementsByClassName("slideShow")[i];
slideShow[i].style.display = "none";
}
slideShow[0].style.display = "inline";
var slides = setInterval(function() {
if (index < slideShow.length) {
index++;
showDivs();
}
else {
index = 1;
showDivs();
}
},1000);
function control(n) {
clearInterval(slides);
if (index+n > slideShow.length) {
index = 1;
}
else if (index+n <= 0) {
index = slideShow.length;
}
else {
index += n;
}
showDivs();
}
function showDivs() {
//Hide all slideShow elements, and then show only the targeted element
for (let i=1; i<=slideShow.length; i++) {
slideShow[i-1].style.display = "none";
}
slideShow[index-1].style.display = "inline";
}
<button onclick="control(-1)" class="arrows" id="left"><</button>
<p class="slideShow">1</p>
<p class="slideShow">2</p>
<p class="slideShow">3</p>
<p class="slideShow">4</p>
<p class="slideShow">5</p>
<button onclick="control(1)" class="arrows" id="right">></button>
相關問題
- 1. 引導旋轉木馬:旋轉木馬
- 2. jQuery旋轉木馬滑塊
- 3. 旋轉木馬滑塊
- 4. 在引導旋轉木馬
- 5. 在引導旋轉木馬
- 6. 引導旋轉木馬滑塊與文本
- 7. 引導旋轉木馬滑塊響應不工作
- 8. 引導旋轉木馬滑塊 - 只移動滑塊,沒有過多的內容
- 9. bootstrap旋轉木馬不會使滑塊
- 10. 旋轉木馬滑塊與篩選
- 11. 尋找原型滑塊/旋轉木馬
- 12. 錯誤在旋轉木馬滑塊笨
- 13. JQuery滑塊/旋轉木馬計算
- 14. 試圖製作旋轉木馬滑塊
- 15. jQuery Mobile的滑塊/旋轉木馬
- 16. Mobify旋轉木馬無限滑塊
- 17. Angular2光滑旋轉木馬
- 18. 滑塊與旋轉木馬圖像滑塊
- 19. 旋轉木馬內的旋轉木馬
- 20. jquery touch旋轉木馬滑塊菜單導航
- 21. 全屏旋轉木馬圖像(引導)
- 22. 引導旋轉木馬火狐定位
- 23. 引導旋轉木馬 - 隨機順序
- 24. 旋轉木馬不在引導工作
- 25. 引導 - 褒獎旋轉木馬問題
- 26. 無法創建引導旋轉木馬
- 27. 引導旋轉木馬加載
- 28. 理解引導旋轉木馬代碼
- 29. 引導旋轉木馬定製
- 30. 旋轉木馬圖像不引導
預計你至少嘗試爲自己的代碼這一點。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**](http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) ,無論是通過谷歌或通過搜索,嘗試和。如果您仍然遇到麻煩,請返回**您的代碼**並解釋您所嘗試的內容。 –