片滚动插件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

});

浏览DEMO>>

源代码：

查看源代码

打印 帮助

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);

 

转载于:https://www.cnblogs.com/tangself/archive/2012/05/15/2501182.html