制作一个没有 jQuery 的循环 JavaScript 幻灯片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12670471/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make a looping JavaScript Slideshow without jQuery
提问by user1697962
Possible Duplicate:
trying to create simple Slide show method in Javascript
I have learn to make carousel image slideshow script with JavaScript. I think it's better to learn it from the basic than we just make something from the framework (instant script) but I'm a newbie. I write this script using my technique, but I think it's terrible.
我已经学会了用 JavaScript 制作轮播图像幻灯片脚本。我认为从基础学习它比我们从框架（即时脚本）中制作一些东西更好，但我是一个新手。我用我的技术写了这个脚本，但我认为它很糟糕。
OK, here is my question : I don't know how to make this slideshow loop, anyone can help me? Thanks
好的，这是我的问题：我不知道如何制作这个幻灯片循环，有人可以帮助我吗？谢谢
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrapper {
width:400px;
height:140px;
position:absolute;
left:50%;
top:50%;
margin: -70px 0 0 -200px;
background: #383838;
overflow: hidden;
}
#abc-container {
position: absolute;
width:1200px;
height:140px;
}
#a {
width:400px;
height:140px;
background: #FF0000;
float: left;
}
#b {
width:400px;
height:140px;
background: #FFFF00;
float: left;
}
#c {
width:400px;
height:140px;
background: #00FFFF;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="abc-container">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</div>
<div id="asas"></div>
<div id="asass"></div>
<script type="text/javascript">
var runCarousel, runTimer;
firstval = 0;
secondval = 0;
function Carousel(){
firstval += 10;
document.getElementById('abc-container').style.left = "-" + firstval + "px";
document.getElementById('asas').innerHTML = "-" + firstval;
if(firstval == 400)
{
StopRun();
StartTimer()
return;
}
if(firstval == 800)
{
StopRun();
StartTimer()
return;
}
runCarousel = setTimeout(Carousel, 10);
}
function StartTimer(){
secondval += 1;
document.getElementById('asass').innerHTML = "-" + secondval;
if(secondval == 10)
{
StopTimer();
Carousel();
return;
}
if(secondval == 20)
{
StopTimer();
Carousel();
return;
}
runTimer = setTimeout(StartTimer, 1000);
}
function StopRun(){
window.clearTimeout(runCarousel);
}
function StopTimer(){
window.clearTimeout(runTimer);
}
function firstStart(){
setTimeout("Carousel()", 10000);
}
firstStart();
</script>
</body>
</html>
回答by Vitalii Maslianok
Firstly there is an error:
首先有一个错误：
function firstStart(){
setTimeout("Carousel()", 10000);
}
correctly:
正确：
function firstStart(){
setTimeout(Carousel, 10000);
}
in the end, all settings are reset to default and start timer:
最后，所有设置都重置为默认值并启动计时器：
in Carousel:
在旋转木马中：
if(firstval == 1200){
document.getElementById('abc-container').style.left = "0" + "px";
firstval = 0;
StopRun();
StartTimer()
return;
}
in StartTimer
在启动计时器中
if(secondval == 30) {
secondval = 0;
StopTimer();
Carousel();
return;
}
![Javascript localStorage.getItem('item') 是否比 localStorage.item 或 localStorage['item'] 好？](/res/img/loading.gif)