jquery图片切换实例分析
编程学习 2021-07-04 21:47www.dzhlxh.cn编程入门
这篇文章主要介绍了jquery图片切换的方法,实例分析了jQuery实现页面元素与相应样式切换效果的使用相关技巧,设计jQuery中hide、fadeIn、css、setInterval等方法的使用,需要的朋友可以参考下
本文实例讲述了jquery图片切换实现方法。分享给大家供大家参考。具体如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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'});
//给狼蚁网站SEO优化对应的按钮加上边框，当然这里也可以做其他的效果
//加边框只是为了测试
}
$(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>
希望本文所述对大家的jQuery程序设计有所帮助。