https://otozure.jp/js/fadeTransition1.js

1      (function ($) {
2        $.fn.fadeTransition = function(options) {
3          var options = $.extend({pauseTime: 5000, transitionTime: 2000, ignore: null, delayStart: 0, pauseNavigation: false}, options);
4          var transitionObject;
5
6          Trans = function(obj) {
7            var timer = null;
8            var current = 0;
9            var els = (options.ignore)?$("> *:not(" + options.ignore + ")", obj):$("> *", obj);
10            $(obj).css("position", "relative");
11            els.css("display", "none").css("left", "0").css("top", "0").css("position", "absolute");
12            
13            if (options.delayStart > 0) {
14              setTimeout(showFirst, options.delayStart);
15            }
16            else
17              showFirst();
18
19            function showFirst() {
20              if (options.ignore) {
21                $(options.ignore, obj).fadeOut(options.transitionTime);
22                $(els[current]).fadeIn(options.transitionTime);
23              }
24              else {
25                $(els[current]).css("display", "block");
26              }
27            }
28
29            function transition(next) {
30              $(els[current]).fadeOut(options.transitionTime);
31              $(els[next]).fadeIn(options.transitionTime);
32              current = next;
33              cue();
34            };
35
36            function cue() {
37              if ($("> *", obj).length < 2) return false;
38              if (timer) clearTimeout(timer);
39              if (!options.pauseNavigation) {
40                timer = setTimeout(function() { transition((current + 1) % els.length | 0)} , options.pauseTime);
41              }
42            };
43            
44            this.showItem = function(item) {
45              if (timer) clearTimeout(timer);
46              transition(item);
47            };
48
49            cue();
50          }
51
52          this.showItem = function(item) {

53            transitionObject.showItem(item);
54          };
55
56          return this.each(function() {
57            transitionObject = new Trans(this);
58          });
59        }
60
61      })(jQuery);
62    
63      var page = {
64        tr: null,
65        init: function() {
66          page.tr = $(".area").fadeTransition({pauseTime: 5000, transitionTime: 2000, ignore: "#introslide", delayStart: 1000});
67          $("div.navigation").each(function() {
68            $(this).children().each( function(idx) {
69              if ($(this).is("a"))
70                $(this).click(function() { page.tr.showItem(idx); return false; })
71            });
72          });
73        },
74
75        show: function(idx) {
76          if (page.tr.timer) clearTimeout(page.tr.timer);
77          page.tr.showItem(idx);
78        }
79      };
80
81      $(document).ready(page.init);