https://www.m2online.jp/js/rotate_banner.js

1
2$(function() {
3    // util
4    var select_thumb = function($container, index) {
5        var $list = $container.find('.rotate-thumb-list');
6        var $selected = $($list.find('.rotate-thumb').get(index));
7        
8        $list.find('.rotate-thumb').removeClass('rotate-selected');
9        $selected.addClass('rotate-selected');
10    };
11    
12    // visual effects
13    $('.rotate-thumb').live('mouseover', function(e) {
14        if ($(this).hasClass('rotate-selected')) return;
15        $(this).stop().animate({opacity: '0.6'}, {duration: 200});
16    });
17    
18    $('.rotate-thumb').live('mouseout', function(e) {
19        if ($(this).hasClass('rotate-selected')) return;
20        $(this).stop().animate({opacity: '0.3'}, {duration: 200});
21    });
22    
23    // rotate effects
24    $('.rotate-container').live('mouseover', function(e) {
25        $(this).attr('auto_rotate_suspend', 1);
26    });
27    
28    $('.rotate-container').live('mouseout', function(e) {
29        $(this).attr('auto_rotate_time', 0);
30        $(this).attr('auto_rotate_suspend', 0);
31    });
32    
33    $('.rotate-down').click(function(e) {
34        var $container = $(this).closest('.rotate-container');
35        var $list = $container.find('.rotate-thumb-list');
36        
37        $container.attr('auto_rotate_time', 0);
38        
39        var $last = $list.find('.rotate-thumb:last');
40        var margin = 3 - $last.height();
41        
42        $list.css({'margin-top': margin});
43        $list.prepend($last.clone());
44        
45        select_thumb($container, 1);
46        
47        $list.animate(
48            {'margin-top': 3},
49            {
50                'complete': function() {
51                    $last.remove();
52                }
53            }
54        );
55        
56        $container.trigger('rotate-flush');
57    });
58    
59    $('.rotate-up').click(function(e) {
60        var $container = $(this).closest('.rotate-container');
61        var $list = $container.find('.rotate-thumb-list');
62        
63        $container.attr('auto_rotate_time', 0);
64        
65        var $first = $list.find('.rotate-thumb:first');
66        var margin = 3 - $first.height();
67        
68        $list.append($first.clone());
69        
70        select_thumb($container, 2);
71        
72        $list.animate(
73            {'margin-top': margin},
74            {
75                'complete': function() {
76                    $first.remove();
77                    $list.css('margin-top', 3);
78                }
79            }
80        );
81        
82        $container.trigger('rotate-flush');
83    });
84    
85    $('.rotate-thumb').live('click', function(e) {
86        var $container = $(this).closest('.rotate-container');
87        var $list = $(this).closest('.rotate-thumb-list');
88        
89        var $first  = $list.find('.rotate-thumb:first');
90        var $second = $($list.find('.rotate-thumb').get(2));
91        
92        if ($(this).get(0) === $first.get(0)) {
93            $container.find('.rotate-down').click();
94        } else if ($(this).get(0) === $second.get(0)) {
95            $container.find('.rotate-up').click();
96        }
97        
98        return false;
99    });
100    
101    // flush main
102    $('.rotate-container').bind('rotate-flush', function(e) {
103        var $selected = $(this).find('.rotate-selected');
104        var $main = $(this).find('.rotate-main');
105        
106        var $a = $('<a />').attr('href', $selected.attr('href')).attr('target', $selected.attr('target'));
107        var $img = $selected.find('img').clone().removeAttr('height');
108        
109        $a.append($img);
110        
111        $(this).find('.rotate-thumb').animate({opacity: 0.3}, {duration: 200});
112        $selected.animate({opacity: 1}, {duration: 200});
113        
114        $main.animate(
115            {opacity: 0},
116            {
117                duration:   200,
118                complete:   function() {
119                    $main.empty().append($a);
120                    $main.animate({opacity: 1}, {duration: 200});
121                }
122            }
123        );
124    });
125    
126    // initialization
127    $('.rotate-container').each(function() {
128        if ($(this).find('.rotate-thumb').size() == 0) return;
129        
130        // adjust element amount
131        while ($(this).find('.rotate-thumb').size() < 3) {
132            $(this).find('.rotate-thumb-list').append($(this).find('.rotate-thumb').clone());
133        }
134        
135        // first render
136        select_thumb($(this), 1);
137        $(this).trigger('rotate-flush');
138        
139        // auto rotation
140        if ($(this).attr('no_auto_rotation')) return true;
141        
142        (function($c) {
143            $c.attr('auto_rotate_time', 0);
144            $c.attr('auto_rotate_suspend', 0);
145            
146            setInterval(function() {
147                if (parseInt($c.attr('auto_rotate_suspend')) == 1) return;
148                
149                $c.attr('auto_rotate_time', parseInt($c.attr('auto_rotate_time')) + 500);
150                
151                if (parseInt($c.attr('auto_rotate_time')) < 5000) return;
152                
153                $c.find('.rotate-down').click();
154            }, 500);
155        })($(this));
156    });
157});
158