如何长时间显示图像滑块

时间:2016-09-09 10:37:44

标签: javascript css angularjs html5 timer

我试图长时间显示图像滑块,我已经使用超时来显示每个图像。 但是现在我想在这种情况下成像滑块:

1.如果我们不使用系统,系统不应进入睡眠模式    应该显示图像滑块,直到我关闭浏览器。

2.系统不应进入屏保模式,应显示图像
   滑块直到我关闭浏览器。

代码:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
.mySlides 
{
display:none;
}
</style>

<body>

<h2 class="w3-center"></h2>

<div class="w3-content w3-section" style=""width='962px';height='565px';frameborder='0'"">
  <img class="mySlides" src="Chrysanthemum.jpg" style="width='100%">
  <img class="mySlides" src="Desert.jpg" style="width:100%">
  <img class="mySlides" src="Hydrangeas.jpg" style="width:100%">
</div>

<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) 
    {
       x[i].style.display = "none";  
    }

    myIndex++;
    if (myIndex > x.length)
     {
        myIndex = 1;
     }    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000); 
}
</script>

</body>
</html> 

0 个答案:

没有答案