Question

嗨我正在使我的背景图像随机出现。但现在我希望它每30或40秒更换一次图像。现在我的代码看起来像这样：

#background{
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: -100px;
<?php
  $count = rand(1, 8);
  $hello = "background: url('img/backImg/". $count ."') center center;"; 
  echo ($hello);
?>
  background-repeat:no-repeat;
  background-color:   #d8d8d8;
  background-size: cover;
}

所以我希望$count字符串每隔30秒取一个随机数。

Answer 1

jQuery Cycle插件是一个幻灯片插件，支持许多不同类型的过渡效果。它支持暂停，自动停止，自动调整，回调之前/之后，点击触发等等。

您可以将timeout或delay设置为30秒。

Answer 2

你可以在javascript的帮助下完成这项工作。它会每30秒调用一次这个函数

var myVar=setInterval(function(){myTimer()},30000);
function myTimer(){
    // your code to change the background image url 
    // you can do that with $('#background').attr('style',"your css") or  
    // $('#background').css('background-url',"your path") 
}

Answer 3

<pre> 
<script type="text/javascript">
  $(document).ready(function counter() {
     randomNumber=Math.floor(Math.random() * 8) + 1; //make random number between 1-8
     $(this).css("background-image", "url('img/backImg/" + randomNumber + ".png')");
     setTimeout("counter()",30000); play function counter after 30s
  });//end the $(document).ready
</script>
</pre>

试试这段代码，希望对你有所帮助。

此功能在您的页面准备好工作时启动，并在1-8之间生成一个随机数，然后更改您的背景图像并在30秒后获得增益你只需设置你的相反。

我如何使功能每30秒运行一次？

3 个答案: