目录
点击按钮左右移动图片
效果图
Jquery:
//图片滑动
$(function () {
var right = 2;
$(".goLeft").click(function () {
right--;
if (right < 0) {
right = 2;
}
$(".prolist_content").animate({
"left": (-578) * right + "px"
}, 1000);
})
var index = 0;
$(".goRight").click(function () {
index++;
if (index >= 3) {
index = 0;
}
$(".prolist_content").animate({
"left": (-578) * index + "px"
}, 1000);
})
})
CSS:
/*新款上市样式*/
.content_right .prolist {
position:relative;
height: 220px;
margin-bottom:10px;
overflow:hidden;
border: 1px solid #AAAAAA;
background:#FFFFFF;
}
.content_right .prolist .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;
}
HTML:
<div class="content_right">
<div class="global_module prolist">
<h3>新款上市</h3>
<div class="prolist_content">
<ul>
<li>
<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a>
<span>免烫高支棉衬衣1</span>
<span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a&g