Home > Article > Web Front-end > jquery图片切换实例分析_jquery
jquery图片切换实例分析_jquery
- WBOYOriginal
- 2016-05-16 16:03:51987browse
本文实例讲述了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'});
//给下面对应的按钮加上边框，当然这里也可以做其他的效果
//加边框只是为了测试
}
$(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" style="max-width:90%"/ alt="jquery图片切换实例分析_jquery" >
</div>
<div style="width:980px; height:241px; display:none;
text-align:center" id="c2">
<img src="images/4037.jpg" style="max-width:90%" style="max-width:90%"/ alt="jquery图片切换实例分析_jquery" >
</div>
<div style="width:980px; height:241px; display:none;
text-align:center" id="c3"><img src="images/4041.jpg"
style="max-width:90%" height="241"/></div>
<div style="width:980px; height:241px; display:none;
text-align:center" id="c4">
<img src="images/xmjz.jpg" style="max-width:90%"/ alt="jquery图片切换实例分析_jquery" >
</div>
<div style="width:980px; height:241px;
display:none;text-align:center" id="c5">
<img src="images/xmjz.jpg" style="max-width:90%"/ alt="jquery图片切换实例分析_jquery" >
</div>
<div style="width:980px; height:241px;
display:none;text-align:center" id="c6">
<img src="images/xmjz.jpg" style="max-width:90%"/ alt="jquery图片切换实例分析_jquery" >
</div>
<div style="width:980px; height:241px;
display:none;text-align:center" id="c7">
<img src="images/xmjz.jpg" style="max-width:90%"/ alt="jquery图片切换实例分析_jquery" >
</div>
<div style="width:980px; height:241px;
display:none;text-align:center" id="c8">
<img src="images/xmjz.jpg" style="max-width:90%"/ alt="jquery图片切换实例分析_jquery" >
</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程序设计有所帮助。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JQuery radio（单选按钮）操作方法汇总_jqueryNext article：JavaScript实现的encode64加密算法实例分析_javascript技巧