本文实例讲述了jquery图片切换实现方法。分享给大家供大家参考。具体如下:
"">
#butt div{
width:122px; height:32px; float:left; text-align:center;
}
function tab_q(now_id)
{
if(now_id == null)
{
//alert($("#butt").find("div:visible").attr("id"))
c_show_id = $("#cont").find("div:visible").attr("id");
//此时显示按钮的ID名称
nums_id = c_show_id.substring(1,3);
//截取B1后面的1,作为字符串放到C后面
b_show_id = "b"+ nums_id;
//此时显示内容的ID名称
nums_next = parseInt(nums_id)+1
//alert(nums_next)
if(nums_next<=8)
//如果到最后一个的话,那么就要跳回第一个
{
}
else
{
nums_next = 1
}
}else
{
nums_next = now_id.substring(1,3);
}
$("#cont div").hide();
//让所有的上面的div中的图片消失。
//是为了罗出地方让下一张图片出现的。
$("#butt div").css({border:'#FF0000 0px solid'});
//让所有按钮的边框消失。是为了让下一个按钮有边框,
//alert("#"+"c"+nums_next)
$("#c"+nums_next).fadeIn() //让上面的图片淡出来
$("#b"+nums_next).css({border:'#FF0000 1px solid'});
//给下面对应的按钮加上边框,当然这里也可以做其他的效果
//加边框只是为了测试
}
$(function(){ //当页面加载完成
auto = setInterval("tab_q()",2000); //这里修改切换的时间的
$("#cont div").each(function(i,n){
$(n).hover(
function(){
clearInterval(auto) },
function(){auto=setInterval("tab_q()",2000); }
)
})
$("#butt div").each(function(i,n){
$(n).hover(
function(){
clearInterval(auto);
tab_q($(this).attr("id"))
},function(){auto=setInterval("tab_q()",2000); }
)
})
})
id="butt">
更多信息请查看IT技术专栏