Question

我想按照一天中的时间显示不同的滑块。例如，从0-9am＆lt;滑块设置1＆＃39;，从上午9点到12点＆＃39;滑块设置2＆＃39;，依此类推。由于我是java脚本的新手，请帮我解决。我有一些代码，会在不同的时间显示不同的图像。在这里分享。

<!DOCTYPE html>
<html>
<body onload="myFunction()">

<p id="slider"></p>

<script>
function myFunction() {
var greeting;
var time = new Date().getHours();
if (time>=0 && time<10) {
    greeting = '<img     src="http://www.devtrix.net/sliderman/demos/demo/img/01.jpg"/>'
} else if (time>=10 && time< 12) {
    greeting = '<img src="http://www.devtrix.net/sliderman/demos/demo/img/02.jpg"/>'
} else if (time>=12 && time< 16) {
    greeting = '<img src="http://www.devtrix.net/sliderman/demos/demo/img/03.jpg"/>';
} else if (time>=16 && time< 20) {
    greeting = '<img src="http://www.devtrix.net/sliderman/demos/demo/img/04.jpg"/>'
} else {
    greeting = '<img src="http://www.devtrix.net/sliderman/demos/demo/img/05.jpg"/>'
}
document.getElementById("slider").innerHTML = greeting;
}
</script>

</body>
</html>

Answer 1

我在这里使用过猫头鹰旋转木马。请参阅此fiddle。

我现在要设置一个2000毫秒的间隔来检查（因为处理小时数对于测试来说是不切实际的），因此对你的代码进行了评论。我没有更改HTML，而是在这里更改了幻灯片。

if (time >= 0 && time < 10) {
  owl.trigger('next.owl.carousel');
} else if (time >= 10 && time < 12) {
  owl.trigger('next.owl.carousel');
} else if (time >= 12 && time < 16) {
  owl.trigger('next.owl.carousel');
} else if (time >= 16 && time < 20) {
  owl.trigger('next.owl.carousel');
} else {    }

根据一天中的时间更改滑块

1 个答案: