HTML
CSS
<div class="photos_l"><img alt="" src="/images/arrow_l.png" /></div>
<div class="photos">
<div class="kkkk">
<div class="kkk">
<asp:Repeater ID="rptImages" runat="server">
<ItemTemplate>
<div class="kk">
<a href='detail.aspx?p_id=<%#Eval("P_ID") %>'><img alt="" src="<%#Eval("P_Images") %>" /></a>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</div>
<div class="photos_r"><img alt="" src="/images/arrow_r.png" /></div>
CSS
.list_style1 .photos_l {position:absolute; top:655px; left:18px; cursor:pointer;}
.list_style1 .photos_r {position:absolute; top:655px; right:18px; cursor:pointer;}
.list_style1 .photos {position:absolute; top:535px; left:50px; width:905px; height:303px; overflow:hidden;}
.list_style1 .photos .kkkk{ position:relative; width:99999px;}
.list_style1 .photos .kkk{float:left;}
.list_style1 .photos .kk{float:left; width:170px; height:260px; padding:0px 5px; }
JS
$(window).load(function () { //不用$(document).ready()是为了在数据加载完全后才能把总宽度测量正确
$(".photos_l").css({ "display": "none" });
$(".photos_r").css({ "display": "none" });
list_style1和list_style2的照片左右滚动
$(".list_style1,.list_style2").one("mouseenter", function () {
var la = $(this).children(".photos_l");
var ra = $(this).children(".photos_r");
var PW = $(this).children(".photos").width();//测得放照片的容器宽度
var kkkk = $(this).children(".photos").children(".kkkk");
var kkk = $(this).children(".photos").children(".kkkk").children(".kkk");
if (kkk.width() > PW) {
var n = 0;
ra.css({ "display": "block" });
ra.click(function () {
la.css({ "display": "block" });
var xx = kkkk.offset().left - kkk.offset().left;
if (xx == PW * n || xx == PW * n - 1) { //这里有个或,是因为IE8测量的宽度会短1个像素
kkk.animate({ marginLeft: "-" + PW * (n + 1) + "px" }, function () {
if (kkk.width() <= PW * (n + 2)) {
ra.css({ "display": "none" });
}
n = n + 1;
});
}
});
la.click(function () {
ra.css({ "display": "block" });
var xx = kkkk.offset().left - kkk.offset().left;
if (xx == PW * n || xx == PW * n - 1) {
kkk.animate({ marginLeft: "-" + PW * (n - 1) + "px" }, function () {
if (n <= 1) {
la.css({ "display": "none" });
}
n = n - 1;
});
}
});
}
});
});