本文實例講述了jquery圖片切換實現方法。分享給大家供大家參考。具體如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
<html xmlns="">
<head>
<script language="javascript" src="inc/jquery-1.4.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<style type="text/css">
#butt div{
width:122px; height:32px; float:left; text-align:center;
}
</style>
<script language="javascript">
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); }
)
})
})
</script>
<body>
<div style="width:980px; height:275px;">
<div style="width:980px; height:241px; overflow:hidden;
text-align:center" id="cont">
<div style="width:980px; height:241px; text-align:center"
id="c1"><img src="images/xmjz.jpg" width="980"/>
</div>
<div style="width:980px; height:241px; display:none;
text-align:center" id="c2">
<img src="images/4037.jpg" width="980" height="241"/>
</div>
<div style="width:980px; height:241px; display:none;
text-align:center" id="c3"><img src="images/4041.jpg"
width="980" height="241"/></div>
<div style="width:980px; height:241px; display:none;
text-align:center" id="c4">
<img src="images/xmjz.jpg" width="980"/>
</div>
<div style="width:980px; height:241px;
display:none;text-align:center" id="c5">
<img src="images/xmjz.jpg" width="980"/>
</div>
<div style="width:980px; height:241px;
display:none;text-align:center" id="c6">
<img src="images/xmjz.jpg" width="980"/>
</div>
<div style="width:980px; height:241px;
display:none;text-align:center" id="c7">
<img src="images/xmjz.jpg" width="980"/>
</div>
<div style="width:980px; height:241px;
display:none;text-align:center" id="c8">
<img src="images/xmjz.jpg" width="980"/>
</div>
</div>
<div style="width:980px; height:31px; border:#FF0000 0px solid"
id="butt">
<div style="background-image:url(images/xmbtn_1.png)" id="b1">
</div>
<div style="background-image:url(images/xmbtn_2.png)" id="b2">
</div>
<div style="background-image:url(images/xmbtn_2.png)" id="b3">
</div>
<div style="background-image:url(images/xmbtn_2.png)" id="b4">
</div>
<div style="background-image:url(images/xmbtn_2.png)" id="b5">
</div>
<div style="background-image:url(images/xmbtn_2.png)" id="b6">
</div>
<div style="background-image:url(images/xmbtn_2.png)" id="b7">
</div>
<div style="background-image:url(images/xmbtn_2.png)" id="b8">
</div>
</div>
</div>
</body>
</html>
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
