【问题标题】:JavaScript slideshow (start from other slide, depending on day of week)JavaScript 幻灯片(从其他幻灯片开始,取决于星期几)
【发布时间】:2016-04-13 15:14:18
【问题描述】:

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

有可能做到吗?谁能帮我解决这个问题?厌倦了搜索谷歌:)

【问题讨论】:

  • 记录在案:cmets 应该解释 为什么 你的代码做了它所做的,而不是 what 正在发生.. 如果不是很明显给另一个程序员,那么你应该致力于重构你的代码而不是添加 cmets

标签: javascript slideshow slide


【解决方案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>

【讨论】:

    【解决方案2】:

    我举了一个例子,但它是基于位置的。

    Example - 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);
    
        });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-09-20
      • 2015-04-21
      • 1970-01-01
      相关资源
      最近更新 更多