https://www.suntech-power.co.jp/js/top.js

1
2//document ready時
3//-----------------------------------
4$(document).ready(function () {
5
6    //メインビジュアルここから
7
8    var $displayingOverlap = null;
9    var containterWidth = '1001px';
10    var containerHeight = 351;
11
12    var changeCurrent = function ($target) {
13      $displayingOverlap = $target;
14      if(!$target) return;
15      var matched = $target.attr('class').match(/-item(\d+)/)[1];
16      var index;
17      if(matched) {
18        index = parseInt(matched[1]) - 1;
19        selectMenu(index);
20      }
21    };
22
23    var selectMenu = function (index) {
24      $('.top_main_slide_thum .top_main_slide_thum-item a').each(function (i) {
25        if(i === index) {
26          $(this).addClass('selected');
27        }else{
28          $(this).removeClass('selected');
29        }
30      });
31    };
32
33    var getNext = function ($overlap) {
34      var n = $overlap.next();
35      if(n.length){
36        return n;
37      }else{
38        return $('.top_main_slide-item:first');
39      }
40    };
41    var getPrev = function ($overlap) {
42      var n = $overlap.prev();
43      if(n.length){
44        return n;
45      }else{
46        return $('.top_main_slide-item:last');
47      }
48    };
49    var swingIn = function ($overlap, direction, done) {
50      var w = $('.top_main_slide').width();
51      var startLeft, endLeft;
52      if(direction === 'leftToRight') {
53        startLeft = - w;
54        endLeft = 0;
55      }else if(direction === 'rightToLeft'){
56        startLeft = w;
57        endLeft = 0;
58      }
59      $overlap
60      .css('position', 'absolute')
61      .css('width', containterWidth)
62      .css('top', '0px')
63      .css('left', startLeft + 'px')
64      .show()
65      .animate({
66        left: endLeft + 'px'
67      }, 200, 'swing', function(){
68        typeof done ==='function' && done($overlap);
69      });
70    };
71
72    var swingOut = function ($overlap, direction, done) {
73      var w = $('.top_main_slide').width();
74      var startLeft, endLeft;
75      if(direction === 'leftToRight') {
76        startLeft = 0;
77        endLeft = w;
78      }else if(direction === 'rightToLeft'){
79        startLeft = 0;
80        endLeft = -w
81      }
82      $overlap
83      .css('width', containterWidth)
84      .css('position', 'absolute')
85      .css('left', startLeft + 'px')
86      .css('top', '0px')
87      .animate({
88        left: endLeft + 'px'
89      }, 200, 'swing', function () {
90        $overlap.hide();
91      })
92      ;
93    };
94
95    var blurInAll = function () {
96      $('.top_main_slide_group-inner').css('opacity', 0).show().animate({
97        opacity: 1.0
98      }, 200, 'swing');
99    };
100
101    var blurOutAll = function () {
102      $('.top_main_slide_group-inner').css('opacity', 1.0).animate({
103        opacity: 0.0
104      }, 200, 'swing', function () {
105        $('.top_main_slide_group-inner').css('opacity', '').hide();
106      });
107    };
108
109    var blurIn = function ($overlap) {
110      $overlap
111      .css('opacity', 0.0)
112      .css('width', containterWidth)
113      .css('position', 'absolute')
114      .css('left', '0px')
115      .css('top', '0px')
116      .show()
117      $overlap.animate({
118        opacity: 1.0
119      }, 100, 'swing', function(){
120        $overlap.css('opacity', '');
121      });
122    };
123
124    var blurOut = function ($overlap) {
125      $overlap.css('opacity', 1.0);
126      $overlap.animate({
127        opacity: 0
128      }, 100, 'swing', function(){
129        $overlap.css('opacity', '').hide();
130      });
131    };
132
133    // イベントハンドラの登録ここから
134
135    // Topの丸いボタン押下時, 全体blur in.
136    $('.main_visual_btn_group li').each(function (idx) {
137      var $this = $(this);
138      var $link = $this.find('a');
139      var $overlap = $('.top_main_slide-item0' + (idx + 1));
140      $link.on('click', function(e) {
141        if(!$displayingOverlap) {
142          changeCurrent($overlap.show());
143          blurInAll();
144        }
145        e.preventDefault();
146        return false;
147      });
148    });
149
150    // 次へ(左から右へのスライド)
151    $('.top_main_slide_controller .prev').click(function() {
152      if($displayingOverlap) {
153        var $prev = getPrev($displayingOverlap);
154        swingIn($prev, 'rightToLeft');
155        swingOut($displayingOverlap, 'rightToLeft');
156        changeCurrent($prev);
157      }else{
158        changeCurrent($('.main_visual_overlap:last'));
159        swingIn($displayingOverlap, 'rightToLeft');
160      }
161    });

162
163    // 前へ(右から左へのスライド)
164    $('.top_main_slide_controller .next').click(function() {
165      if($displayingOverlap) {
166        var $next = getNext($displayingOverlap);
167        swingOut($displayingOverlap, 'leftToRight');
168        swingIn($next, 'leftToRight');
169        changeCurrent($next);
170      }else{
171        changeCurrent($('.main_visual_overlap:first'));
172        swingIn($displayingOverlap, 'leftToRight');
173      }
174    });
175
176    // 閉じるボタン押下時, 全体をblurout.
177    $('.top_main_slide_close').click(function() {
178      blurOutAll();
179      changeCurrent(null);
180    });
181
182    // ナビにマウスオーバ時のblurin, blurout.
183    $('.top_main_slide_thum .top_main_slide_thum-item').each(function (v) {
184      var $this = $(this);
185      var idx = '0' + (v + 1);
186      var $target = $('.top_main_slide-item' + idx);
187      $this.on('mouseenter', function () {
188        if ($displayingOverlap[0] !== $target[0]) {
189          blurIn($target);
190          blurOut($displayingOverlap);
191          changeCurrent($target);
192        }
193      }).click(function ($e) {
194        $e.preventDefault();
195        return false;
196      });
197    });
198    // イベントハンドラの登録ここまで
199
200    $('.top_main_slide-item').hide();
201    $('.top_main_slide-body').height(containerHeight);
202
203    // メインビジュアルここまで
204
205
206
207$(".menu_sm").click(function(){
208  if($("body").hasClass("is-js")){ // クリックされた要素がclickedクラスだったら
209    $("body").removeClass("is-js");
210  }else{
211    $("body").addClass("is-js");
212  }
213});
214
215
216
217});
218
219$(window).load(function() {
220  $('.flexslider').flexslider({
221    animation: "slide",
222    directionNav: false,
223    slideshowSpeed: 3000
224  });
225});