我有这个幻灯片(JS Fidle:https://jsfiddle.net/toon09/zopnqxry/) 一切都适用,但我希望幻灯片开始取决于星期几和一天中的时间。
即。如果今天是星期一(从晚上12点到早上7点),从幻灯片1开始,如果今天是星期一(从早上7点到晚上12点),从幻灯片2开始幻灯片放映,如果今天是星期二,从幻灯片3开始等等。
$(document).ready(function() {
//rotation speed and timer
var speed = 900000000;
var run = setInterval('rotate()', speed);
//grab the width and calculate left value
var item_width = $('#slides li').outerWidth();
var left_value = item_width * (-1);
//move the last item before first item, just in case user click prev button
$('#slides li:first').before($('#slides li:last'));
//set the default item to the correct position
$('#slides ul').css({'left' : left_value});
//if user clicked on prev button
$('#prev').click(function() {
//get the right position
var left_indent = parseInt($('#slides ul').css('left')) + item_width;
//slide the item
$('#slides ul:not(:animated)').animate({'left' : left_indent}, 200,function(){
//move the last item and put it as first item
$('#slides li:first').before($('#slides li:last'));
//set the default item to correct position
$('#slides ul').css({'left' : left_value});
});
//cancel the link behavior
return false;
});
//if user clicked on next button
$('#next').click(function() {
//get the right position
var left_indent = parseInt($('#slides ul').css('left')) - item_width;
//slide the item
$('#slides ul:not(:animated)').animate({'left' : left_indent}, 200, function () {
//move the first item and put it as last item
$('#slides li:last').after($('#slides li:first'));
//set the default item to correct position
$('#slides ul').css({'left' : left_value});
});
//cancel the link behavior
return false;
});
//if mouse hover, pause the auto rotation, otherwise rotate it
$('#slides').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('rotate()', speed);
}
);
});
//a simple function to click next link
//a timer will call this function, and the rotation will begin :)
function rotate() {
$('#next').click();
}
HTML:
<div id="carousel">
<div class="clear"></div>
<div id="slides">
<ul>
<li>If today monday and its from 12 pm till 7:30 <br>am,start showing from this slide</li>
<li>If today monday and its from 7:30 am till 11:59 pm,<br>start showing from this slide</li>
<li>if today is other day of the week<br> (from tuesday to sunday)start slideshow from this slide</li>
</ul>
<div class="clear"></div>
</div>
<div class="tarpas"></div>
<div id="buttons1">
<a href="#" id="prev">prev</a>
<div class="clear"></div>
</div>
<div id="buttons2">
<a href="#" id="next">next</a>
<div class="clear"></div>
</div>
有可能吗?任何人都可以帮助我吗?厌倦了搜索谷歌:)
答案 0 :(得分:0)
我为你构建了一个示例,但它现在设置为关闭,因此您可以看到它在小提琴中工作,它正在检查日期和时间并根据它移动列表元素。
请参阅小提琴https://jsfiddle.net/DIRTY_SMITH/zopnqxry/3/
<script>
function today() {
var d = new Date();
var h = d.getHours();
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var n = weekday[d.getDay()];
var $el = $(li1);
//if friday after 12o'clock trigger
if ((n === "Friday") && (h > 12)) {
//move element down one step
$el.next().after($el);
}
}
</script>
答案 1 :(得分:0)
我做了一个例子,但它是基于一个位置。
Example - https://jsfiddle.net/microThread/h8ncna1v/5/
例: 滑块 - &GT;第1项[位置0], - &GT;第2项[职位1], - &GT;项目n [位置n]
默认情况下,滑块中的所有项目都不显示,并且基于SliderCronPosition.getDayConfig(),您可以获得特定间隔所需的位置。
对于当天配置中不存在的时间间隔,您可以指定当天的默认位置 (例如:'Saturday'.default.start_position)或者如果您当前的日期不在配置中,那么系统会使用'config.default_start_position'。
var SliderCronPosition = {
current_cron_info: {
day: null,
start_position: null,
interval_a: null,
interval_b: null,
},
day_name: {
0: 'Sunday',
1: 'Monday',
2: 'Tuesday',
3: 'Wednesday',
4: 'Thursday',
5: 'Friday',
6: 'Saturday'
},
config: {
default_start_position: 1,
'Sunday': {
'intervals': {
}
},
'Monday': {
'intervals': {
}
},
'Tuesday': {
'intervals': {
}
},
'Wednesday': {
'intervals': {
}
},
'Thursday': {
'intervals': {
}
},
'Friday': {
'intervals': {
}
},
/* Saturday. */
'Saturday': {
'intervals': {
/* Interval 1. */
0: {
'interval_a': '00:00:00',
'interval_b': '07:30:00',
'start_position': 2
},
/* Interval 2. */
1: {
'interval_a': '07:30:00',
'interval_b': '23:59:00',
'start_position': 2
}
},
/* Default value for this day. */
'default': {
'start_position': 1
}
},
},
getDay: function() {
var d = new Date();
return d.getDay();
},
getDayName: function() {
return this.day_name[this.getDay()];
},
getCurrentDate: function() {
var d = new Date();
return (d.getFullYear() + '/' + ('0' + (d.getMonth()+1)).slice(-2)+ '/' + ('0' + d.getDate()).slice(-2) );
},
getCurrentTime: function() {
var d = new Date();
return d.getTime();
},
getIntervalTime: function(time) {
var value = null,
d = new Date(this.getCurrentDate() + " " + time);
if(d instanceof Date && isFinite(d)) {
value = d.getTime();
}
return value;
},
getDayConfig: function() {
var value = null,
d = this.getDayName();
this.current_cron_info.day = null;
this.current_cron_info.start_position = null;
this.current_cron_info.interval_a = null;
this.current_cron_info.interval_b = null;
if(typeof this.config[d] !== 'undefined') {
if(typeof this.config[d].intervals !== 'undefined') {
this.current_cron_info.day = d;
for (var i in this.config[d].intervals) {
var interval_a = this.getIntervalTime(this.config[d].intervals[i].interval_a),
interval_b = this.getIntervalTime(this.config[d].intervals[i].interval_b),
current_time = this.getCurrentTime();
switch(true) {
case (interval_a !== null && interval_b !== null):
if (current_time >= interval_a && current_time <= interval_b) {
this.current_cron_info.interval_a = this.config[d].intervals[i].interval_a;
this.current_cron_info.interval_b = this.config[d].intervals[i].interval_b;
value = this.config[d].intervals[i].start_position;
}
break;
case (interval_a !== null && interval_b === null):
if (current_time >= interval_a) {
this.current_cron_info.interval_a = this.config[d].intervals[i].interval_a;
this.current_cron_info.interval_b = this.config[d].intervals[i].interval_b;
value = this.config[d].intervals[i].start_position;
}
break;
case (interval_a === null && interval_b !== null):
if (current_time <= interval_b) {
this.current_cron_info.interval_a = this.config[d].intervals[i].interval_a;
this.current_cron_info.interval_b = this.config[d].intervals[i].interval_b;
value = this.config[d].intervals[i].start_position;
}
break;
}
}
}
/* In case we don't have any value and we have a default value. */
if(
value == null &&
typeof this.config[d].default !== 'undefined'
) {
value = this.config[d].default.start_position;
}
}
value = (value == null) ? this.config.default_start_position : value;
this.current_cron_info.start_position = value;
return value;
}
};
$(document).ready(function() {
var current_job_info = $('#current_job_info'),
slider = $('#slider'),
get_start_position = SliderCronPosition.getDayConfig();
slider.find('.item').eq( (get_start_position - 1)).show();
current_job_info.append("Day: " + SliderCronPosition.current_cron_info.day);
current_job_info.append(" | Slider Position: " + SliderCronPosition.current_cron_info.start_position);
current_job_info.append(" | Interval A:" + SliderCronPosition.current_cron_info.interval_a);
current_job_info.append(" | Interval B:" + SliderCronPosition.current_cron_info.interval_b);
});