https://www.uv4pal.com/dfiles/9861/tmp/js/uislide.js

1;(function($){
2// 图片轮播插件
3$.fn.UISlide = function(options){
4var defaults = {
5playTime :6000, // 间隔时间
6duration :300, // 延迟时间
7direction :'left', // 方向
8easing :'easeInOutQuad', // 自动播放时 easing 方式
9clickEasing :'easeOutCubic' // 点击时 easing 方式
10};
11var opts = $.extend({}, defaults, options); // 参数合并
12var slide = {
13// 播放调用及一些变量的初始化
14play: function(opts, me){
15var that = this,
16isPlay;
17that.me = me;
18that.picList = me.find('ul'); // 图片列表
19that.title = me.find('span').find('a'); // 图片标题
20that.oNum = me.find('dl'); // 数字按钮
21that.lis = that.picList.find('li'); // li
22that.size = that.lis.length; // 图片的数量
23that.lisWidth = that.lis.width();
24that.isPlay = isPlay; // 是否自动播放
25for (var p in opts) { // opts 绑定到 slide
26that[p] = opts[p];
27}
28that.setNums().setTitle();
29if(that.size > 1){ // 如果图片数量大于则轮播
30that.autoPlay().slideEvent();
31}
32},
33// 设置按钮
34setNums: function(){
35var that = this,
36links, // 图片的链接
37me = that.me,
38size = that.size,
39oNum = that.oNum, // 按钮对象
40arrTemp = [];
41links = that.picList.find('a').first();
42that.title.html(links[0].title).attr('href', links[0].href); // 把链接的 title 内容放到标题栏上显示
43for(var i=1; i<=size; i++){
44arrTemp.push('<dd>' + i + '</dd>');
45}
46oNum.append(arrTemp.join(''));
47that.slideNum = oNum.find('dd');
48that.numWidth = (that.slideNum.width() + parseInt(that.slideNum.css('margin-right')) + 2) * size + 1; // 数字按钮宽度
49that.setTitle();
50return that;
51},
52// 自动播放
53autoPlay: function(){
54var that = this,
55activePos,
56direction = that.direction,
57picList = that.picList,
58slideNum = that.slideNum,
59playTime = that.playTime;
60that.isPlay = setInterval(function (){
61activePos = that.oNum.find('.active').index();
62if(direction == 'left'){
63if(activePos == (that.size - 1)){
64direction = 'right';
65activePos --;
66} else {
67activePos ++;
68}
69} else {
70if(activePos == 0){
71direction = 'left';
72activePos ++;
73} else {
74activePos --;
75}
76}
77picList.stop().animate({'margin-left': 0 - activePos * (that.lisWidth + 3)}, {duration: that.duration, easing: that.easing});
78slideNum.removeClass('active').eq(activePos).addClass('active');
79var links = picList.find('a').eq(activePos);
80that.title.html(links[0].title).attr('href', links[0].href);
81}, playTime);
82return that;
83},
84// 设置标题
85setTitle: function(){
86var that = this;
87that.oNum.width(that.numWidth + 2); // 设置数字按钮宽度
88that.picList.width((that.lisWidth + 3) * that.size); // 设置图片容器总宽度
89that.slideNum.first().addClass('active');
90return that;
91},
92// 绑定数字按钮事件
93slideEvent: function(){
94var that = this,
95slideNum = that.slideNum;
96slideNum.click(function(){
97var thisNum = $(this).index();
98that.picList.stop().animate({"margin-left":0 - thisNum * (that.lisWidth + 3)}, {duration:that.duration, easing:that.clickEasing});
99slideNum.removeClass('active').eq(thisNum).addClass('active');
100var links = that.picList.find('a').eq(thisNum);
101that.title.html(links[0].title).attr('href', links[0].href);
102});
103// 鼠标到画面中任意位置，停止播放
104that.me.hover(function(){
105clearInterval(that.isPlay);
106}, function(){
107that.autoPlay();
108})
109return that;
110}
111};
112/*
113本代码由【素材家园】收集并编辑整理;
114尊重他人劳动成果;
115转载请保留【素材家园】链接 - 【www.sucaijiayuan.com】
116*/
117return this.each(function(){ // $(a,b) 方式调用
118slide.play(opts, $(this));
119});
120}
121})(jQuery);