片滚动插件myScroll
在做产品展示时经常用到，此插件支持两种形式，一种手段左右滚动，一种自动播放。可控制图片显示个数，滚动间隔时间，及动画时间等。
插件参数：
auto:[false,3000] 这里是个数组，第一个是否自动滚动,第二个是自动滚动间隔时间
visible:4 可显示图片的数量
speed:1000 动画时间，可选slow，fast，数值类
scroll:1 每次切换的个数,此数小于等于visible值
使用方法：
首先保证html结构如下：
1 |
<div class="myScroll" id="product0"> |
2 |
<p class="myPrevBtn"></p> |
3 |
<p class="myNextBtn"></p> |
4 |
<div class="myBlock"> |
5 |
<ul> |
6 |
<li> |
7 |
<dl> |
8 |
<dt><a href=""><img src="img.jpg" alt="" /></a></dt> |
9 |
<dd><a href="">图片滚动插件</a></dd> |
10 |
</dl> |
11 |
</li> |
12 |
<li> |
13 |
<dl> |
14 |
<dt><a href=""><img src="img.jpg" alt="" /></a></dt> |
15 |
<dd><a href="">图片滚动插件</a></dd> |
16 |
</dl> |
17 |
</li> |
18 |
<li> |
19 |
<dl> |
20 |
<dt><a href=""><img src="img.jpg" alt="" /></a></dt> |
21 |
<dd><a href="">图片滚动插件</a></dd> |
22 |
</dl> |
23 |
</li> |
24 |
</ul> |
25 |
</div> |
26 |
</div> |
html结构中li里面的形式自己可以根据实际情况修改
css样式：
1 |
*{ margin:0; padding:0} |
2 |
|
3 |
/*-插件样式*/ |
4 |
.myScroll { |
5 |
width:100%; |
6 |
height:210px; |
7 |
overflow:hidden; |
8 |
zoom:1; |
9 |
} |
10 |
.myScroll p { |
11 |
width:22px; |
12 |
height:210px; |
13 |
background-image:url(icon.gif); |
14 |
background-repeat:no-repeat; |
15 |
cursor:pointer |
16 |
} |
17 |
.myPrevBtn { |
18 |
background-position:left center; |
19 |
float:left; |
20 |
display:inline |
21 |
} |
22 |
.myNextBtn { |
23 |
background-position:right center; |
24 |
float:right; |
25 |
display:inline |
26 |
} |
27 |
.myBlock { |
28 |
overflow:hidden; |
29 |
float:left; |
30 |
display:inline |
31 |
} |
32 |
.myBlock ul { |
33 |
width:100%; |
34 |
overflow:hidden; |
35 |
zoom:1; |
36 |
list-style:none |
37 |
} |
38 |
.myBlock ul li { |
39 |
width:200px; |
40 |
float:left; |
41 |
padding:10px 0; |
42 |
display:inline |
43 |
} |
44 |
.myBlock ul li:hover { |
45 |
background-color:#FFC |
46 |
} |
47 |
.myBlock dl { |
48 |
width:160px; |
49 |
margin:0 auto; |
50 |
list-style:none; |
51 |
} |
52 |
.myBlock dl dt { |
53 |
width:160px; |
54 |
height:160px; |
55 |
overflow:hidden; |
56 |
background-color:#FFF |
57 |
} |
58 |
.myBlock dl dt img { |
59 |
width:160px; |
60 |
} |
61 |
.myBlock dl dd { |
62 |
line-height:18px; |
63 |
list-style:none; |
64 |
text-align:center |
65 |
} |
66 |
.myBlock dl dd a { |
67 |
display:inline-block; |
68 |
padding:3px 0; |
69 |
width:100%; |
70 |
} |
71 |
.myClone { |
72 |
overflow:hidden; |
73 |
zoom:1 |
74 |
} |
75 |
.myClone ul { |
76 |
float:left; |
77 |
display:inline |
78 |
} |
调用插件：
1 |
//手动滚动 |
2 |
$("#product0").myScroll({ |
3 |
visible:3, |
4 |
scroll:2, |
5 |
speed:1000 |
6 |
}); |
7 |
|
8 |
//自动滚动 |
9 |
$("#product").myScroll({ |
10 |
visible:4, |
11 |
scroll:3, |
12 |
auto:[true,2000], |
13 |
speed:1000 |
14 |
}); |
源代码：
1 |
(function($) |
2 |
{ |
3 |
$.fn.myScroll = function(options) |
4 |
{ |
5 |
|
6 |
//默认配置 |
7 |
var defaults = { |
8 |
auto: [false, 3000], |
9 |
//是否自动滚动,第二个参数是自动滚动是切换的间隔时间 |
10 |
visible: 4, |
11 |
//可显示的数量 |
12 |
speed: 1000, |
13 |
//动画时间，可选slow，fast，数值类 |
14 |
scroll: 1 //每次切换的个数,此数小于等于visible值 |
15 |
}; |
16 |
|
17 |
var opts = $.extend( |
18 |
{}, defaults, options); |
19 |
opts.scroll = opts.scroll > opts.visible ? opts.visible : opts.scroll; |
20 |
|
21 |
this.each(function(i) |
22 |
{ |
23 |
|
24 |
var prevBtn = $(this).find("p.myPrevBtn"), |
25 |
nextBtn = $(this).find("p.myNextBtn"), |
26 |
block = $(this).find("div.myBlock"), |
27 |
innerBlock = block.find("ul"), |
28 |
list = block.find('ul>li'), |
29 |
listNum = list.size(), |
30 |
listWidth = list.width(), |
31 |
blockWidth = listWidth * opts.visible, |
32 |
ntervalId; |
33 |
|
34 |
//设置宽度样式 |
35 |
$(this).width(blockWidth + prevBtn.width() + nextBtn.width()); |
36 |
block.width(blockWidth).find("ul").width(listWidth * listNum); |
37 |
|
38 |
//获取已滚动个数 |
39 |
|
40 |
function getSnum() |
41 |
{ |
42 |
return (parseInt(innerBlock.css("margin-left")) * -1) / listWidth; |
43 |
} |
44 |
|
45 |
//获取滚动的距离 |
46 |
|
47 |
function getMove(c) |
48 |
{ |
49 |
return c >= opts.scroll ? opts.scroll * listWidth : c * listWidth; |
50 |
} |
51 |
|
52 |
//单击向前按钮 |
53 |
prevBtn.click(function() |
54 |
{ |
55 |
var snum = getSnum(), |
56 |
c = listNum - snum - opts.visible, |
57 |
m = getMove(c); |
58 |
|
59 |
if (listNum - snum > opts.visible) |
60 |
{ |
61 |
innerBlock.animate( |
62 |
{ |
63 |
"margin-left": "-=" + m |
64 |
}, opts.speed); |
65 |
} |
66 |
}); |
67 |
|
68 |
//单击向后按钮 |
69 |
nextBtn.click(function() |
70 |
{ |
71 |
var snum = getSnum(), |
72 |
m = getMove(snum); |
73 |
|
74 |
if (snum > 0) |
75 |
{ |
76 |
innerBlock.animate( |
77 |
{ |
78 |
"margin-left": "+=" + m |
79 |
}, opts.speed); |
80 |
} |
81 |
}); |
82 |
|
83 |
//如果自动滚动 |
84 |
if (opts.auto[0]) |
85 |
{ |
86 |
|
87 |
$(this).width(blockWidth); |
88 |
prevBtn.hide(); |
89 |
nextBtn.hide(); |
90 |
|
91 |
function auto() |
92 |
{ |
93 |
var snum = getSnum(), |
94 |
m = getMove(listNum - snum - opts.visible); |
95 |
|
96 |
if (listNum - snum > opts.visible) |
97 |
{ |
98 |
innerBlock.animate( |
99 |
{ |
100 |
"margin-left": "-=" + m |
101 |
}, opts.speed); |
102 |
} |
103 |
else |
104 |
{ |
105 |
innerBlock.css("margin-left", 0).find('li').slice(0, listNum - opts.visible).appendTo(innerBlock); |
106 |
} |
107 |
} |
108 |
|
109 |
//当鼠标经过滚动区域停止滚动 |
110 |
block.hover(function() |
111 |
{ |
112 |
clearInterval(intervalId); |
113 |
}, function() |
114 |
{ |
115 |
intervalId = setInterval(auto, opts.auto[1] + Math.abs(opts.speed - opts.auto[1]) + 100); |
116 |
}).trigger('mouseleave'); |
117 |
|
118 |
} |
119 |
|
120 |
}); |
121 |
|
122 |
}; |
123 |
|
124 |
})(jQuery); |
浙公网安备 33010602011771号