jquery图片切换实例分析
本文实例讲述了jquery图片切换实现方法。分享给大家供大家参考。具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<scriptlanguage="javascript"src="inc/jquery-1.4.2.js"></script>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
</head>
<styletype="text/css">
#buttdiv{
width:122px;height:32px;float:left;text-align:center;
}
</style>
<scriptlanguage="javascript">
functiontab_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);
}
$("#contdiv").hide();
//让所有的上面的div中的图片消失。
//是为了罗出地方让下一张图片出现的。
$("#buttdiv").css({border:'#FF00000pxsolid'});
//让所有按钮的边框消失。是为了让下一个按钮有边框，
//alert("#"+"c"+nums_next)
$("#c"+nums_next).fadeIn()//让上面的图片淡出来
$("#b"+nums_next).css({border:'#FF00001pxsolid'});
//给下面对应的按钮加上边框，当然这里也可以做其他的效果
//加边框只是为了测试
}
$(function(){//当页面加载完成
auto=setInterval("tab_q()",2000);//这里修改切换的时间的
$("#contdiv").each(function(i,n){
$(n).hover(
function(){
clearInterval(auto)},
function(){auto=setInterval("tab_q()",2000);}
)
})
$("#buttdiv").each(function(i,n){
$(n).hover(
function(){
clearInterval(auto);
tab_q($(this).attr("id"))
},function(){auto=setInterval("tab_q()",2000);}
)
})
})
</script>
<body>
<divstyle="width:980px;height:275px;">
<divstyle="width:980px;height:241px;overflow:hidden;
text-align:center"id="cont">
<divstyle="width:980px;height:241px;text-align:center"
id="c1"><imgsrc="images/xmjz.jpg"width="980"/>
</div>
<divstyle="width:980px;height:241px;display:none;
text-align:center"id="c2">
<imgsrc="images/4037.jpg"width="980"height="241"/>
</div>
<divstyle="width:980px;height:241px;display:none;
text-align:center"id="c3"><imgsrc="images/4041.jpg"
width="980"height="241"/></div>
<divstyle="width:980px;height:241px;display:none;
text-align:center"id="c4">
<imgsrc="images/xmjz.jpg"width="980"/>
</div>
<divstyle="width:980px;height:241px;
display:none;text-align:center"id="c5">
<imgsrc="images/xmjz.jpg"width="980"/>
</div>
<divstyle="width:980px;height:241px;
display:none;text-align:center"id="c6">
<imgsrc="images/xmjz.jpg"width="980"/>
</div>
<divstyle="width:980px;height:241px;
display:none;text-align:center"id="c7">
<imgsrc="images/xmjz.jpg"width="980"/>
</div>
<divstyle="width:980px;height:241px;
display:none;text-align:center"id="c8">
<imgsrc="images/xmjz.jpg"width="980"/>
</div>
</div>
<divstyle="width:980px;height:31px;border:#FF00000pxsolid"
id="butt">
<divstyle="background-image:url(images/xmbtn_1.png)"id="b1">
</div>
<divstyle="background-image:url(images/xmbtn_2.png)"id="b2">
</div>
<divstyle="background-image:url(images/xmbtn_2.png)"id="b3">
</div>
<divstyle="background-image:url(images/xmbtn_2.png)"id="b4">
</div>
<divstyle="background-image:url(images/xmbtn_2.png)"id="b5">
</div>
<divstyle="background-image:url(images/xmbtn_2.png)"id="b6">
</div>
<divstyle="background-image:url(images/xmbtn_2.png)"id="b7">
</div>
<divstyle="background-image:url(images/xmbtn_2.png)"id="b8">
</div>
</div>
</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。