https://www.tornex.co.jp/wp/wp-content/themes/tornex/js/wideslider.js

1
2$(function(){
3    $setElm = $('.wideslider');
4    baseWidth = 1200;
5    baseHeight = 600;
6    minWidth = 320;
7 
8    slideSpeed = 700;
9    delayTime = 5000;
10    easing = 'linear';
11    autoPlay = '1'; // notAutoPlay = '0'
12 
13    flickMove = '1'; // notFlick = '0'
14 
15    btnOpacity = 0.5;
16    pnOpacity = 0.5;
17 
18    ua = navigator.userAgent;
19 
20    $(window).load(function(){
21        $setElm.find('img').css({display:'block'});
22        $setElm.each(function(){
23            targetObj = $(this);
24            targetObj.children('ul').wrapAll('<div class="wideslider_base"><div class="wideslider_wrap"></div><div class="slider_prev"></div><div class="slider_next"></div></div>');
25 
26            var findBase = targetObj.find('.wideslider_base'),
27            findWrap = targetObj.find('.wideslider_wrap'),
28            findPrev = targetObj.find('.slider_prev'),
29            findNext = targetObj.find('.slider_next');
30 
31            var pagination = $('<div class="pagination"></div>');
32            targetObj.append(pagination);
33 
34            var baseList = findWra

34p.find('li'),
35            baseListLink = findWrap.find('li').children('a'),
36            baseListCount = findWrap.find('li').length;
37 
38            baseList.each(function(i){
39                $(this).css({width:(baseWidth),height:(baseHeight)});
40                pagination.append('<a href="javascript:void(0);" class="pn'+(i+1)+'"></a>');
41            });
42 
43            var findPagi = targetObj.find('.pagination');
44 
45            setSlide();
46            function setSlide(){
47                windowWidth = $(window).width();
48                findList = findWrap.find('li');
49                setParts = (findBase,findWrap,findPrev,findNext,$setElm);
50 
51                setWrapLeft = parseInt(findWrap.css('left'));
52                setlistWidth = findList.find('img').width();
53                setLeft = setWrapLeft / setlistWidth;
54 
55                if(windowWidth < baseWidth){
56                    if(windowWidth > minWidth){
57                        findList.css({width:(windowWidth)});
58                        var reImgHeight = findList.find('img').height();
59                        findList.css({height:(reImgHeight)});
60                        setParts.css({height:(reImgHeight)});
61                    } else if(windowWidth <= minWidth){
62                        findList.css({width:(minWidth)});
63                        var reImgHeight = findList.find('img').height();
64                        findList.css({height:(reImgHeight)});
65                        setParts.css({height:(reImgHeight)});
66                    }
67                } else if(windowWidth >= baseWidth){
68                    findList.css({width:(baseWidth),height:(baseHeight)});
69                    setParts.css({height:(baseHeight)});
70                }
71 
72                setWidth = findList.find('img').width();
73                setHeight = findList.find('img').height();
74                baseWrapWidth = (setWidth)*(baseListCount);
75 
76                ulCount = findWrap.find('ul').length;
77                if(ulCount == 1){
78                    var makeClone = findWrap.children('ul');
79                    makeClone.clone().prependTo(findWrap);
80                    makeClone.clone().appendTo(findWrap);
81                    findWrap.children('ul').eq('1').addClass('mainList');

82                    var mainList = findWrap.find('.mainList').children('li');
83                    mainList.eq('0').addClass('mainActive')
84 
85                    allListCount = findWrap.find('li').length;
86                }
87                allLWrapWidth = (setWidth)*(allListCount),
88                posAdjust = ((windowWidth)-(setWidth))/2;
89 
90                findBase.css({left:(posAdjust),width:(setWidth),height:(setHeight)});
91                findPrev.css({left:-(posAdjust),width:(posAdjust),height:(setHeight),opacity:(btnOpacity)});
92                findNext.css({right:-(posAdjust),width:(posAdjust),height:(setHeight),opacity:(btnOpacity)});
93 
94                findWrap.css({width:(allLWrapWidth),height:(setHeight)});
95                findWrap.children('ul').css({width:(baseWrapWidth),height:(setHeight)});
96 
97                posResetNext = -(baseWrapWidth)*2,
98                posResetPrev = -(baseWrapWidth)+(setWidth);
99 
100                adjLeft = setWidth * setLeft;
101                findWrap.css({left:(adjLeft)});
102 
103            }
104            findWrap.css({left:-(baseWrapWidth)});
105 
106            var pnPoint = pagination.children('a'),
107            pnFirst = pagination.children('a:first'),
108            pnLast = pagination.children('a:last'),
109            pnCount = pagination.children('a').length;
110 
111            if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){
112                pnPoint.css({opacity:(pnOpacity)});
113            } else {
114                pnPoint.css({opacity:(pnOpacity)}).hover(function(){
115                    $(this).stop().animate({opacity:'1'},300);
116                }, function(){
117                    $(this).stop().animate({opacity:(pnOpacity)},300);
118                });
119            }
120 
121            pnFirst.addClass('active');
122            pnPoint.click(function(){
123                if(autoPlay == '1'){clearInterval(wsSetTimer);}
124                var setNum = pnPoint.index(this),
125                moveLeft = ((setWidth)*(setNum))+baseWrapWidth;
126                findWrap.stop().animate({left: -(moveLeft)},slideSpeed,easing);
127                pnPoint.removeClass('active');
128                $(this).addClass('active');
129                activePos();
130                if(autoPlay == '1'){wsTimer();}
131            });
132 
133            if(autoPlay == '1'){wsTimer();}
134 
135            function wsTimer(){
136                wsSetTimer = setInterval(function(){
137                    findNext.click();
138                },delayTime);
139            }
140            findNext.click(function(){
141                findWrap.not(':animated').each(function(){
142                    if(autoPlay == '1'){clearInterval(wsSetTimer);}
143                    var posLeft = parseInt($(findWrap).css('left')),
144                    moveLeft = ((posLeft)-(setWidth));
145                    findWrap.stop().animate({left:(moveLeft)},slideSpeed,easing,function(){
146                        var adjustLeft = parseInt($(findWrap).css('left'));
147                        if(adjustLeft <= posResetNext){
148                            findWrap.css({left: -(baseWrapWidth)});
149                        }
150                    });
151 
152                    var pnPointActive = pagination.children('a.active');
153                    pnPointActive.each(function(){
154                        var pnIndex = pnPoint.index(this),
155                        listCount = pnIndex+1;
156                        if(pnCount == listCount){
157                            pnPointActive.removeClass('active');
158                            pnFirst.addClass('active');
159                        } else {
160                            pnPointActive.removeClass('active').next().addClass('active');
161                        }
162                    });
163                    activePos();
164 
165                    if(autoPlay == '1'){wsTimer();}
166                });
167            }).hover(function(){
168                $(this).stop().animate({opacity:((btnOpacity)+0.1)},100);
169            }, function(){
170                $(this).stop().animate({opacity:(btnOpacity)},100);
171            });
172 
173            findPrev.click(function(){
174                findWrap.not(':animated').each(function(){
175                    if(autoPlay == '1'){clearInterval(wsSetTimer);}
176 
177                    var posLeft = parseInt($(findWrap).css('left')),
178                    moveLeft = ((posLeft)+(setWidth));
179                    findWrap.stop().animate({left:(moveLeft)},slideSpeed,easing,function(){
180                        var adjustLeft = parseInt($(findWrap).css('left')),
181                        adjustLeftPrev = (posResetNext)+(setWidth);
182                        if(adjustLeft >= posResetPrev){
183                            findWrap.css({left: (adjustLeftPrev)});
184                        }
185                    });
186 
187                    var pnPointActive = pagination.children('a.active');
188                    pnPointActive.each(function(){
189                        var pnIndex = pnPoint.index(this),
190                        listCount = pnIndex+1;
191                        if(1 == listCount){
192                            pnPointActive.removeClass('active');
193                            pnLast.addClass('active');
194                        } else {
195                            pnPointActive.removeClass('active').prev().addClass('active');
196                        }
197                    });
198                    activePos();
199 
200                    if(autoPlay == '1'){wsTimer();}
201                });
202            }).hover(function(){
203                $(this).stop().animate({opacity:((btnOpacity)+0.1)},100);
204            }, function(){
205                $(this).stop().animate({opacity:(btnOpacity)},100);
206            });
207 
208            function activePos(){
209                var posActive = findPagi.find('a.active');
210                posActive.each(function(){
211                    var posIndex = pnPoint.index(this),

212                    setMainList = findWrap.find('.mainList').children('li');
213                    setMainList.removeClass('mainActive').eq(posIndex).addClass('mainActive');
214                });
215            }
216 
217            $(window).on('resize',function(){
218                if(autoPlay == '1'){clearInterval(wsSetTimer);}
219                setSlide();
220                if(autoPlay == '1'){wsTimer();}
221            }).resize();
222 
223            if(flickMove == '1'){
224                var isTouch = ('ontouchstart' in window);
225                findWrap.on(
226                    {'touchstart mousedown': function(e){
227                        if(findWrap.is(':animated')){
228                            e.preventDefault();
229                        } else {
230                            if(autoPlay == '1'){clearInterval(wsSetTimer);}
231                            if(!(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1)){
232                                e.preventDefault();
233                            }
234                            this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
235                            this.leftBegin = parseInt($(this).css('left'));
236                            this.left = parseInt($(this).css('left'));
237                            this.touched = true;
238                        }
239                    },'touchmove mousemove': function(e){
240                        if(!this.touched){return;}
241                        e.preventDefault();
242                        this.left = this.left - (this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX) );
243                        this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
244                        $(this).css({left:this.left});
245                    },'touchend mouseup mouseout': function(e){
246                        if (!this.touched) {return;}
247                        this.touched = false;
248 
249                        var setThumbLiActive = pagination.children('a.active'),
250                        listWidth = parseInt(baseList.css('width')),leftMax = -((listWidth)*((baseListCount)-1));
251 
252                        if(((this.leftBegin)-30) > this.left && (!((this.leftBegin) === (leftMax)))){
253                            $(this).stop().animate({left:((this.leftBegin)-(listWidth))},slideSpeed,easing,function(){
254                                var adjustLeft = parseInt($(findWrap).css('left'));
255                                if(adjustLeft <= posResetNext){
256                                    findWrap.css({left: -(baseWrapWidth)});
257                                }
258                            });
259 
260                            setThumbLiActive.each(function(){
261                                var pnIndex = pnPoint.index(this),
262                                listCount = pnIndex+1;
263                                if(pnCount == listCount){
264                                    setThumbLiActive.removeClass('active');
265                                    pnFirst.addClass('active');
266                                } else {
267                                    setThumbLiActive.removeClass('active').next().addClass('active');
268                                }
269                            });
270                            activePos();
271                        } else if(((this.leftBegin)+30) < this.left && (!((this.leftBegin) === 0))){
272                            $(this).stop().animate({left:((this.leftBegin)+(listWidth))},slideSpeed,easing,function(){
273                                var adjustLeft = parseInt($(findWrap).css('left')),
274                                adjustLeftPrev = (posResetNext)+(setWidth);
275                                if(adjustLeft >= posResetPrev){
276                                    findWrap.css({left: (adjustLeftPrev)});
277                                }
278                            });
279                            setThumbLiActive.each(function(){
280                                var pnIndex = pnPoint.index(this),
281                                listCount = pnIndex+1;
282                                if(1 == listCount){
283                                    setThumbLiActive.removeClass('active');
284                                    pnLast.addClass('active');
285                                } else {
286                                    setThumbLiActive.removeClass('active').prev().addClass('active');
287                                }
288                            });
289                            activePos();
290                        } else {
291                            $(this).stop().animate({left:(this.leftBegin)},slideSpeed,easing);
292                        }
293                        compBeginLeft = this.leftBegin;
294                        compThisLeft = this.left;
295                        baseListLink.click(function(e){

296                            if(!(compBeginLeft == compThisLeft)){
297                                e.preventDefault();
298                            }
299                        });
300                        if(autoPlay == '1'){wsTimer();}
301                    }
302                });
303            }
304            setTimeout(function(){setSlide();},500);
305        });
306    });
307});