jquery实现手动图片滚动效果
效果图：
功能介绍：当点击左按钮或右按钮时，图片会以每四张为一个版块向左或右滚动
HTML
1
<
div
class
="global_module prolist"
>
2
<
h3
>
新款上市
</
h3
>
3
<
div
class
="prolist_content"
>
4
<
ul
>
5
<
li
>
<
a
href
="detail.html"
><
img
src
="images/img_1.jpg"
alt
=""
/></
a
><
span
>
免烫高支棉衬衣1
</
span
><
span
>
$120.00
</
span
>
</
li
>
6
<
li
>
<
a
href
="detail.html"
><
img
src
="images/img_2.jpg"
alt
=""
/></
a
><
span
>
免烫斜纹衬衣
</
span
><
span
>
$129.00
</
span
>
</
li
>
7
<
li
>
<
a
href
="detail.html"
><
img
src
="images/img_3.jpg"
alt
=""
/></
a
><
span
>
棉小方格正装衬衣
</
span
><
span
>
$129.00
</
span
>
</
li
>
8
<
li
>
<
a
href
="detail.html"
><
img
src
="images/img_4.jpg"
alt
=""
/></
a
><
span
>
小米兰格衬衣蓝色
</
span
><
span
>
$129.00
</
span
>
</
li
>
9
<
li
>
<
a
href
="detail.html"
><
img
src
="images/img_1.jpg"
alt
=""
/></
a
><
span
>
免烫高支棉衬衣2
</
span
><
span
>
$120.00
</
span
>
</
li
>
10
<
li
>
<
a
href
="detail.html"
><
img
src
="images/img_2.jpg"
alt
=""
/></
a
><
span
>
免烫斜纹衬衣
</
span
><
span
>
$129.00
</
span
>
</
li
>
11
<
li
>
<
a
href
="detail.html"
><
img
src
="images/img_3.jpg"
alt
=""
/></
a
><
span
>
棉小方格正装衬衣
</
span
><
span
>
$129.00
</
span
>
</
li
>
12
<
li
>
<
a
href
="detail.html"
><
img
src
="images/img_4.jpg"
alt
=""
/></
a
><
span
>
小米兰格衬衣蓝色
</
span
><
span
>
$129.00
</
span
>
</
li
>
13
<
li
>
<
a
href
="detail.html"
><
img
src
="images/img_1.jpg"
alt
=""
/></
a
><
span
>
免烫高支棉衬衣3
</
span
><
span
>
$120.00
</
span
>
</
li
>
14
<
li
>
<
a
href
="detail.html"
><
img
src
="images/img_2.jpg"
alt
=""
/></
a
><
span
>
免烫斜纹衬衣
</
span
><
span
>
$129.00
</
span
>
</
li
>
15
<
li
>
<
a
href
="detail.html"
><
img
src
="images/img_3.jpg"
alt
=""
/></
a
><
span
>
棉小方格正装衬衣
</
span
><
span
>
$129.00
</
span
>
</
li
>
16
<
li
>
<
a
href
="detail.html"
><
img
src
="images/img_4.jpg"
alt
=""
/></
a
><
span
>
小米兰格衬衣蓝色
</
span
><
span
>
$129.00
</
span
>
</
li
>
17
</
ul
>
18
</
div
>
19
<
p
class
="module_left_right"
><
img
class
="goLeft"
src
="images/left.gif"
alt
=""
/><
img
class
="goRight"
src
="images/right.gif"
alt
=""
/></
p
>
20
</
div
>
21
</
div
>
CSS：
.content_right .prolist
{
height
:
220px
;
margin-bottom
:
10px
;
overflow
:
hidden
;
border
:
1px solid #AAAAAA
;
background
:
#FFFFFF
;
}
.prolist_content
{
position
:
absolute
;
width
:
1800px
;
top
:
26px
;
left
:
0px
;
padding
:
20px 0 0 8px
;
}
.content_right .prolist ul
{
margin-bottom
:
10px
;
float
:
left
;
height
:
220px
;
}
.content_right .prolist ul li
{
float
:
left
;
display
:
inline
;
text-align
:
center
;
margin-right
:
22px
;
}
.content_right .prolist ul li span
{
display
:
block
;
overflow
:
hidden
;
}
.content_right .prolist ul li img
{
display
:
block
;
width
:
124px
;
height
:
124px
;
background
:
#EEE
;
border
:
0
;
}
.module_left_right
{
position
:
absolute
;
top
:
5px
;
right
:
10px
;
cursor
:
pointer
;
}
js代码：
$(
function
(){
var
page
=
1
;
var
i
=
4
;
//
每版放4个图片
var
len
=
$(
"
.prolist_content ul li
"
).length;
var
page_count
=
Math.ceil(len
/
i) ;
//
只要不是整数，就往大的方向取最小的整数
var
none_unit_width
=
$(
"
.prolist
"
).width();
//
获取框架内容的宽度,不带单位
var
$parent
=
$(
"
.prolist_content
"
);
//
向右 按钮
$(
"
.goRight
"
).click(
function
(){
if
(
!
$parent.is(
"
:animated
"
) ){
if
( page
==
page_count ){
//
已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
$parent.animate({ left :
0
},
800
);
//
通过改变left值，跳转到第一个版面
page
=
1
;
}
else
{
$parent.animate({ left :
'
-=
'
+
none_unit_width},
800
);
//
通过改变left值，达到每次换一个版面
page
++
;
}
}
});
//
往左 按钮
$(
"
.goLeft
"
).click(
function
(){
if
(
!
$parent.is(
"
:animated
"
) ){
if
( page
==
1
){
//
已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
$parent.animate({ left :
'
-=
'
+
none_unit_width
*
(page_count
-
1
)},
800
);
//
通过改变left值，跳转到最后一个版面
page
=
page_count;
}
else
{
$parent.animate({ left :
'
+=
'
+
none_unit_width },
800
);
//
通过改变left值，达到每次换一个版面
page
--
;
}
}
});
});