在做产品展示时经常用到，此插件支持两种形式，一种手段左右滚动，一种自动播放。可控制图片显示个数，滚动间隔时间，及动画时间等。
插件参数：
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); |