JavaScript幻灯片显示（从其他幻灯片开始，具体取决于星期几）

Question

我有这张幻灯片（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>

有可能这样做吗？ 有人可以帮我吗？ 厌倦了搜索谷歌:)

Answer 1

我为您构建了一个示例，但是现在将其设置为关闭，因此您可以看到它在小提琴中起作用，它正在检查日期和时间，并基于该日期和时间移动列表元素。

参见小提琴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>

Answer 2

我举一个例子，但这是基于职位的。

示例-https://jsfiddle.net/microThread/h8ncna1v/5/

例如：滑块->项目1 [位置0]，->项目2 [位置1]，->项目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);

    });