https://vietnam.gov.vn/DesktopModule/UIArticleSlider/SliderEachItem.js

1/// <reference path="../../Scripts/jquery-1.7.1.min.js" />
2/// <reference path="../../Scripts/jquery-ui-1.8.min.js" />
3
4(function ($) {
5    $.fn.SliderEachItem = function (options) {
6        var params = { effectivetime: 5000, effectivetype: 'show' };
7        params = jQuery.extend(params, options);
8        var main = $(this);
9        var items = main.find('.ArticleItem');
10        var articlecontent = $(main.find('.ArticleContent')[0])
11        var ctop = main.offset().top;
12        var cleft = main.offset().left;
13        var cwidth = main.width();
14        var cheight = main.height();
15        var buttons, buttonbar;
16        var i, j;
17        var inteval;
18
19        var createButtons = function () {
20            if (items.length > 1) {
21                for (var i = 1; i <= items.length; i++)
22                    $('<span class="Button">' + i + '</span>').appendTo(buttonbar);
23                buttons = buttonbar.children();
24            }
25        };
26
27        var itemRun = function (ev) {
28
29            if (params.effectivetype == 'show') {
30                if (ev == 'toleft' || i > j) {
31                    $(items[i]).toggle('slide', { direction: 'right', duration: 500 });
32                    $(items[j]).toggle('slide', { direction: 'left', duration: 500 });
33                }
34                else if (ev == 'toright' || i < j) {
35                    $(items[i]).toggle('slide', { direction: 'left', duration: 500 });
36                    $(items[j]).toggle('slide', { direction: 'right', duration: 500 });
37                }
38                i = j;
39            }
40            else if (params.effectivetype == 'fade') {
41                $(items[i]).css('zIndex', 0).toggle('fade', 700);
42                $(items[j]).css('zIndex', 1).toggle('fade', 700);
43                i = j;
44            }
45        };
46
47        var loop = function () {
48            inteval = setInterval(function () {
49                j = i + 1;
50                if (j == items.length) j = 0;
51                buttons.attr('class', 'Button');
52                $(buttons[j]).attr('class', 'ButtonActive');
53                itemRun();
54            }, params.effectivetime);
55        };
56
57        if (items.length > 0) {
58            items.hide();
59            i = 0; j = 0;
60            $(items[i]).show();
61
62            var buttonlist = $('<div class="ButtonList"><div class="ButtonBar"></div></div>').appendTo(main);
63            cheight = main.innerHeight();
64            buttonlist.css({ top: ctop + (cheight - buttonlist.height() - 20), left: cleft, width: cwidth + 'px' });
65            buttonbar = $(buttonlist.children()[0]);
66            createButtons();
67
68            var prevButton = $('<div class="prev">Prev</div>').appendTo(main)
69            var nextButton = $('<div class="next">Next</div>').appendTo(main)
70
71            prevButton.click(function () {
72                clearInterval(inteval);
73                j = j - 1;
74                if (j < 0) {
75                    j = items.length - 1;
76                }
77                buttons.attr('class', 'Button');
78                $(buttons[j]).attr('class', 'ButtonActive');
79                itemRun('toleft');
80                loop();

81            })
82
83            nextButton.click(function () {
84                clearInterval(inteval);
85                j = j + 1;
86                if (j >= items.length) {
87                    j = 0;
88                }
89                buttons.attr('class', 'Button');
90                $(buttons[j]).attr('class', 'ButtonActive');
91                itemRun('toright');
92                loop();
93
94            })
95
96            buttons.click(function () {
97                clearInterval(inteval);
98                j = buttons.index($(this));
99                buttons.attr('class', 'Button');
100                $(buttons[j]).attr('class', 'ButtonActive');
101                itemRun();
102                loop();
103            });
104
105            for (var item = 0; item < items.length; item++) {
106                var index = item + 1;
107                if (index >= items.length) {
108                    index = 0;
109                }
110                var link = $(items[index]).find(".ItemContent>.Title>a:not(.clone)");
111                var title = $(items[item]).find(".ItemContent>.Title");
112                var clone = link.clone().addClass("clone");
113
114                title.append(clone);
115            }
116            itemRun();
117            loop();

118        }
119    }
120})(jQuery);