JavaScript幻灯片(从其他幻灯片开始,取决于星期几)

时间:2016-01-08 20:26:55

标签: javascript slideshow slide

我有这个幻灯片(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>

有可能吗?任何人都可以帮助我吗?厌倦了搜索谷歌:)

2 个答案:

答案 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);

    });