https://thad.com.cn/Public/front/js/poposlides.js

1(function($) {
2    $.fn.poposlides = function(options) {
3
4        var settings = $.extend({
5            auto:true,             //自动播放
6            nav:true,              //切换按钮
7            playspeed:8000,         //自动播放速度
8            fadespeed:500,         //淡入淡出速度
9            loop:true,             //循环播放
10            pagination:true,       //页码显示
11			pagecenter:true,       //页码居中
12            prev:".prev",          //上一页按钮
13            next:".next"           //下一页按钮
14            }, options);
15
16        return this.each(function() {
17
18            var $this = $(this),
19                slide = $this.children(),
20                index = 0;
21                len = slide.length-1,
22                slideWidth = $this.width(),
23                prev = settings.prev,
24                next = settings.next;
25
26            //初始隐藏其它页，显示当前页
27			if(!navigator.userAgent.match(/mobile/i)){
28				slide.hide();
29				slide.eq(index).show();
30			}else{
31				slide.css({
32					"opacity":"0"
33				});
34				slide.eq(index).css({
35					"opacity":"1"
36				});
37			};
38
39			 if(len == 0) {
40				settings.auto = false;
41				settings.loop = false
42			} else {
43				settings.auto = true;
44				settings.loop = true
45			}
46			
47
48            //显示当前页
49            slideFadeIn = function(){
50				if(!navigator.userAgent.match(/mobile/i)){
51					slide.fadeOut(settings.fadespeed);
52					slide.eq(index).fadeIn(settings.fadespeed);
53				}else{
54					slide.css({
55						"opacity":"0",
56						"-webkit-transition": settings.fadespeed/1000+"s"
57					});
58					slide.eq(index).css({
59						"opacity":"1",
60						"-webkit-transition": settings.fadespeed/1000+"s"
61					});
62				};
63            };
64
65            //翻页加，判断是否循环
66            slideAdd = function() {
67            	console.log(settings.loop,'settings.loop')
68            	if(settings.loop){
69					index == len?index=0:index++;
70				}else{
71					index == len?index=len:index++;
72				};
73        		slideFadeIn();
74            };
75
76            //翻页减，判断是否循环
77            slideMinus = function() {
78            	if(settings.loop){
79					index == 0?index=len:index--;
80				}else{
81					index == 0?index=0:index--;
82				};
83        		slideFadeIn();
84            };
85
86            //页码
87            pagnation = function(){
88            	var $paginationBox = $("<ul class='pagination006'></ul>");
89            	var paginationStr ="";
90				for(var i=1;i<=len+1;i++){
91//					paginationStr +="<li><a href='javascript:void(0)'>"+ i +"</a>";
92				}
93				$paginationBox.append(paginationStr);
94				$this.after($paginationBox);
95
96				$(".pagination006 li a").eq(index).addClass("active");
97
98            };
99
100            //当前页码
101            pageActive = function(){
102				$(".pagination006 li a").removeAttr("class")
103            	$(".pagination006 li a").eq(index).addClass("active");
104			}
105
106			//是否需要左右导航图标
107            if(settings.nav) {
108				var navStr = "<a href='javascript:void(0)' class="+ prev.substring(1) +"></a>" +
109							 "<a href='javascript:void(0)' class="+ next.substring(1) +"></a>";
110				$this.after(navStr);
111
112                $(next).click(function(){
113                	slideAdd();
114                });
115
116                $(prev).click(function(){
117                	slideMinus();
118                })
119			};
120
121			//是否需要页码
122			if(settings.pagination) {
123				pagnation();
124				$(prev).click(function(){ pageActive();});
125				$(next).click(function(){ pageActive();});
126
127                $(".pagination006 li").click(function(){
128                	var idx = $(this).index()-1;
129                	index = idx;
130                	slideAdd();
131                	pageActive();
132                });
133			};
134
135			//页码居中
136			if(settings.pagecenter){
137				var pw = $(".pagination006").width();
138				$(".pagination006").css({
139					"position":"absolute",
140					"left":"50%",
141					"bottom":"5px",
142					"margin-left":-pw/2,
143					"z-index": "99"
144				})
145			};
146
147			//是否自动播放
148			if(settings.auto){
149		        var play = setInterval(function(){
150		        	slideAdd();
151		        	pageActive();
152		        },settings.playspeed);
153		        $this.nextAll().hover(function () {
154		            clearInterval(play);

155		        },
156		        function(){
157		        	play = setInterval(function(){
158		        		slideAdd();
159		        		pageActive();
160		        	},settings.playspeed);
161		        });
162            };
163           
164
165        });
166    };
167
168})(jQuery);