幻灯片,图片相册列表,淘宝商品放大镜 jquery实现
1.图片相册切换 主要3个按钮功能
点击小图列表切换大图
$(document).on("click", ".photo_a", function ()
{
$(".photo_a").removeClass("cur").removeAttr("dota_mark");
$(this).addClass("cur").attr("dota_mark",
"dota_cur");
$(".photo_block").children("img").hide().attr("src",
$(this).children("img").attr("src")).fadeIn("slow");
})
点击下一页时,触发选择的小图的下一张小图的点击事件。默认显示7张,当是7的倍数也就是下一个隐藏列表就切换小图列表。
$(document).on("click", ".photo_next", function ()
{
var c =
parseInt($(".photo_a[dota_mark=‘dota_cur‘]").index(‘.photo_list a‘))
+
1;
if ($(".photo_a:eq(" + c + ")").length)
{
$(".photo_a:eq(" + c +
")").click();
if (c % 7 == 0)
{
var number = c / 7 *
707;
$(".photo_ul").animate({ left: -number },
500);
}
}
})
同上
$(document).on("click", ".photo_prev", function ()
{
var c =
parseInt($(".photo_a[dota_mark=‘dota_cur‘]").index(‘.photo_list a‘))
-
1;
if (c >= 0)
{
$(".photo_a:eq(" + c +
")").click();
if ((c - 6) % 7 == 0)
{
var number = (c + 1) / 7 * 707 -
707;
$(".photo_ul").animate({ left: -number },
500);
}
}
})
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。