https://semex.com/proof2016/js/loopslider/jquery.loopslider.js

1/*
2 *  jQuery loopslider v1.0.0
3 *
4 *  Copyright (c) 2013 Shirotama Dango
5 *
6 */
7
8;(function($){
9    $.fn.loopSlider = function(options){
10        
11        //include settings
12        var defaoults = {
13            autoMove : true,
14            mouseOnStop : true,
15            turn : 5000,
16            motion : 'swing',
17            delay: 500,
18            //image size
19            width : 800,
20            height : 100,
21            marginLR : 10,
22            viewSize : 900,
23            viewOverflow : 'hidden',
24            navPositionBottom : 30,
25            navibotton : true,
26            navbtnImage : '●'
27        }
28        var setting = $.extend(defaoults, options);
29        
30        //setting
31        var slider = $('#slider'),
32            slView = $('#sl-view'),
33            slDiv = $('.sl-div'),
34            slDivLen = slDiv.length,
35            slWrap = $('#sl-wrap'),
36            nextBtn = $('#sl-next'),
37            prevBtn = $('#sl-prev');
38        
39        //counter
40        var counter = {
41            min : 0,
42            max : slDivLen,
43            current : 0
44        }
45        
46        slDiv.css({
47            width : setting.width + 'px',
48            height : setting.height + 'px',
49            marginLeft : (setting.marginLR) + 'px',
50            marginRight : (setting.marginLR) + 'px'
51        });
52        
53        slView.css({
54            width : setting.viewSize + 'px',
55            height : setting.height + 'px',
56            overflow : setting.viewOverflow
57        });
58        
59        if(setting.viewOverflow == 'hidden'){
60            slView.append(nextBtn);
61            slView.append(prevBtn);
62        }
63        
64        //prepend
65        slWrap.prepend(slWrap.html());
66        slWrap.css({
67            width : (setting.width + (setting.marginLR * 2)) * slDivLen*2 + 'px'
68        });
69        
70        //default position
71        var range = -(setting.width+setting.marginLR*2); //move Distance
72        var firstPosition = range*slDivLen + (setting.viewSize-setting.width)/2 - setting.marginLR;
73        slWrap.css({
74            marginLeft : firstPosition + 'px'
75        });
76        
77        //pagenation append
78        
79        if(setting.navibotton){
80            slider.append('<div id="sl-nav"></div>')
81        }
82        var slNav = $('#sl-nav')
83        
84        for(var i=0; i<slDivLen ;i++){
85            slNav.append('<p>'+setting.navbtnImage+'</p>')
86        }
87        $('#sl-nav p:first-child').addClass('hit')
88        navWidth = slNav.outerWidth();
89        
90        // nav botton centering
91        slNav.css({
92            bottom : setting.navPositionBottom + 'px',
93            left: '50%',
94            marginLeft: -(navWidth/2) + 'px'
95        });
96        var slNavP = $('#sl-nav p');
97        
98        slNavP.on('click',function(){
99            var target = $(this).index();
100            if( Math.abs(counter.current - target) > Math.floor(slDivLen/2)){
101                counter.current = -(slDivLen - target);
102                prev();
103            }else{
104                counter.current = target;
105                next();
106            }
107        
108        });
109        
110        //next animation
111        var next = function(){
112            if(counter.current < counter.max-1){
113                slWrap.stop().animate({
114                    left: range * counter.current + 'px'
115                },setting.delay,setting.motion);
116            }else if(counter.current == counter.max-1){
117                slWrap.css({
118                    left: -range*2  + 'px'
119                });
120                slWrap.stop().animate({
121                    left: range * (-1) + 'px'
122                },setting.delay,setting.motion);
123                counter.current = -1;
124            }
125            slNavP.removeClass('hit');
126            slNavP.eq(counter.current).addClass('hit');
127        }
128        
129        //prev animation
130        var prev = function(){
131            if(counter.current > -(slDivLen)){
132                slWrap.stop().animate({
133                    left: range*counter.current + 'px'
134                },setting.delay,setting.motion);
135            }else if(counter.current == -(slDivLen)){
136                slWrap.css({
137                    left: range  + 'px'
138                });
139                slWrap.stop().animate({
140                    left: 0 + 'px'
141                },setting.delay,setting.motion);
142                counter.current = 0;
143            }
144            slNavP.removeClass('hit');
145            slNavP.eq(counter.current).addClass('hit');
146        }
147        
148        //next btn click event
149        nextBtn.on('click',function(){
150            counter.current++;
151            next();
152        });
153        
154        //prev btn click event
155        prevBtn.on('click',function(){
156            counter.current--;
157            prev();
158        });
159        
160        var timer;
161        if(setting.autoMove)startTimer();
162        
163        if(setting.viewOverflow == 'visible'){
164            if(setting.autoMove){
165                if(setting.mouseOnStop){
166                    slider.on({
167                        'mouseover':function(){
168                            clearTimer();
169                        },
170                        'mouseleave':function(){
171                            startTimer();
172                        }
173                    });
174                }
175            }
176        }else{
177            if(setting.autoMove){
178                if(setting.mouseOnStop){
179                    slView.on({
180                        'mouseover':function(){
181                            clearTimer();
182                        },
183                        'mouseleave':function(){
184                            startTimer();
185                        }
186                    });
187                }
188            }
189        }
190        
191        //set interval
192        function startTimer(){
193            timer = setInterval(function(){
194                counter.current++;
195                next();
196            },setting.turn);
197        }
198        
199        //clear interval
200        function clearTimer(){
201            clearInterval(timer)
202        }
203    }
204})(jQuery);