<script> | |
/*功能一:箭头控图*/ | |
n=0;/*用n来记录显示图片的这个数值,第1张为0*/ | |
$(".wrapper img").hide().eq(0).show();/*只显示第1张图片*/ | |
$(".arrow_right").click(function(){/*点右边的箭头*/ | |
if(n<$(".wrapper img").length-1){ | |
n=n+1;/*小于最后一张图像时在增加*/ | |
}else{ | |
n=0;/*回到第1张图片*/ | |
} | |
$(".wrapper img").hide().eq(n).show();/*显示当前数对应的图片*/ | |
$(".wrapper li").removeClass("currentli").eq(n).addClass("currentli");/*所有圆点移除当前类,对应图片数的圆点添加当前类*/ | |
}) | |
$(".arrow_left").click(function(){/*点左边的箭头*/ | |
if(n>0){ | |
n=n-1;/*图像数大于第1张时减1*/ | |
}else{ | |
n=$(".wrapper img").length-1;/*回到最后1张图片*/ | |
} | |
$(".wrapper img").hide().eq(n).show();/*显示当前数对应的图片*/ | |
$(".wrapper li").removeClass("currentli").eq(n).addClass("currentli");/*所有圆点移除当前类,对应图片数的圆点添加当前类*/ | |
}) | |
/*功能二:圆点控制*/ | |
$(".wrapper li").click(function(){/*点圆点*/ | |
n=$(this).index();/*知道点的是第几个圆点*/ | |
$(".wrapper img").hide().eq(n).show();/*把图片显示为对应的张数*/ | |
$(".wrapper li").removeClass("currentli").eq(n).addClass("currentli")/*换圆点提示*/ | |
}) | |
</script> |
JQuery焦点图
最新推荐文章于 2022-02-25 11:00:48 发布