https://www.kinukoubou.com/js/shop_slide.js

1
2$(function(){
3    $(window).load(function(){
4        var setWrap = $('.slideShow'),
5        setMainView = $('.mainView'),
6        setThumbNail = $('.thumbNail'),
7        setMaxWidth = 960,
8        setMinWidth = 450,
9        thumbNum = 4,
10        thumbOpc = 0.5,
11        fadeTime = 1000,
12        delayTime = 5000,
13        sideNavi = 'off', // 'on' or 'off'
14        autoPlay = 'on'; // 'on' or 'off'
15 
16        setWrap.each(function(){
17            var thisObj = $(this),
18            childMain = thisObj.find(setMainView),mainUl = childMain.find('ul'),mainLi = mainUl.find('li'),mainLiFst = mainUl.find('li:first'),
19            childThumb = thisObj.find(setThumbNail),thumbUl = childThumb.find('ul'),thumbLi = childThumb.find('li'),thumbLiFst = childThumb.find('li:first'),thumbLiLst = childThumb.find('li:last');
20 
21            thisObj.css({width:setMaxWidth,display:'block'});
22 
23            mainLi.each(function(i){
24                $(this).attr('class','view' + (i + 1).toString()).css({zIndex:'98',opacity:'0'});
25                mainLiFst.css({zIndex:'99'}).stop().animate({opacity:'1'},fadeTime);
26            });
27 
28            thumbLi.click(function(){
29                if(autoPlay == 'on'){clearInterval(setTimer);}
30 
31                var connectCont = thumbLi.index(this);
32                var showCont = connectCont+1;
33                mainUl.find('.view' + (showCont)).siblings().stop().animate({opacity:'0'},fadeTime,function(){$(this).css({zIndex:'98'});});
34                mainUl.find('.view' + (showCont)).stop().animate({opacity:'1'},fadeTime,function(){$(this).css({zIndex:'99'});});
35 
36                $(this).addClass('active');
37                $(this).siblings().removeClass('active');
38 
39                if(autoPlay == 'on'){timer();}
40 
41            });
42            thumbLi.css({opacity:thumbOpc});
43            thumbLiFst.addClass('active');
44 
45            // メイン画像をベースにエリアの幅と高さを設定
46            var mainLiImg = mainLi.find('img'),
47            baseWidth = mainLiImg.width(),
48            baseHeight = mainLiImg.height();
49 
50            // レスポンシブ動作メイン
51            imgSize();
52            function imgSize(){
53                var windowWidth = parseInt($(window).width());
54                if(windowWidth >= setMaxWidth) {
55                    thisObj.css({width:setMaxWidth});
56                    childMain.css({width:baseWidth,height:baseHeight});
57                    mainUl.css({width:baseWidth,height:baseHeight});
58                    mainLi.css({width:baseWidth,height:baseHeight});
59                    thumbLi.css({width:((setMaxWidth)/(thumbNum))});
60                } else if(windowWidth < setMaxWidth) {
61                    if(windowWidth >= setMinWidth) {
62                        thisObj.css({width:'100%'});
63                        childMain.css({width:'100%'});
64                        mainUl.css({width:'100%'});
65                        mainLi.css({width:'100%'});
66                    } else if(windowWidth < setMinWidth) {
67                        thisObj.css({width:setMinWidth});
68                        childMain.css({width:setMinWidth});
69                        mainUl.css({width:setMinWidth});
70                        mainLi.css({width:setMinWidth});
71                    }
72                    var reHeight = mainLiImg.height();
73                    childMain.css({height:reHeight});
74                    mainUl.css({height:reHeight});
75                    mainLi.css({height:reHeight});
76 					
77					var slidewidth = 16;
78                    var reWidth = setThumbNail.width();
79                    thumbLi.css({width:((reWidth)/(thumbNum)-slidewidth)});
80                }
81            }
82            $(window).resize(function(){imgSize();});
83            imgSize();
84 
85            // サムネイルマウスオーバー
86            var agent = navigator.userAgent;
87            if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
88                thumbLi.hover(function(){
89                    $(this).stop().animate({opacity:'1'},200);

90                },function(){
91                    $(this).stop().animate({opacity:thumbOpc},200);
92                });
93            }
94 
95            // ボタン移動動作
96            function switchNext(){
97                var setActive = thumbUl.find('.active');
98                setActive.each(function(){
99                    var listLengh = thumbLi.length,
100                    listIndex = thumbLi.index(this),
101                    listCount = listIndex+1;
102 
103                    if(listLengh == listCount){
104                        thumbLiFst.click();
105                    } else {
106                        $(this).next('li').click();
107                    }
108                });
109            }
110            function switchPrev(){
111                var setActive = thumbUl.find('.active');
112                setActive.each(function(){
113                    var listLengh = thumbLi.length,
114                    listIndex = thumbLi.index(this),
115                    listCount = listIndex+1;
116 
117                    if(1 == listCount){
118                        thumbLiLst.click();
119                    } else {
120                        $(this).prev('li').click();
121                    }
122                });
123            }
124 
125            // サイドナビボタン（有り無し）
126            if(sideNavi == 'on'){
127                childMain.append('<a href="javascript:void(0);" class="btnPrev"></a><a href="javascript:void(0);" class="btnNext"></a>');
128                var btnPrev = thisObj.find('.btnPrev'),btnNext = thisObj.find('.btnNext'),btnPrevNext = thisObj.find('.btnPrev,.btnNext');
129                if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
130                    btnPrevNext.css({opacity:thumbOpc}).hover(function(){
131                        $(this).stop().animate({opacity:'0.9'},200);
132                    },function(){
133                        $(this).stop().animate({opacity:thumbOpc},200);
134                    });
135                } else {
136                    btnPrevNext.css({opacity:thumbOpc});
137                }
138                btnPrev.click(function(){switchPrev();});
139                btnNext.click(function(){switchNext();});
140            }
141 
142            // 自動再生（有り無し）
143            if(autoPlay == 'on'){
144                function timer(){
145                    setTimer = setInterval(function(){
146                        switchNext();
147                    },delayTime);
148                }
149                timer();
150            }
151        });
152    });
153});