jquery image toggle for instance analysis
- 2020-05-30 19:21:12
- OfStack
The example of this article describes the implementation method of jquery image switching. Share with you for your reference. The details are as follows:
<!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> Headless document </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");
// Displays the button at this point ID The name of the
nums_id = c_show_id.substring(1,3);
// The interception B1 At the back of the 1 As a string C behind
b_show_id = "b"+ nums_id;
// At this point the content is displayed ID The name of the
nums_next = parseInt(nums_id)+1
//alert(nums_next)
if(nums_next<=8)
// If at the end 1 One, then jump back to the first 1 a
{
}
else
{
nums_next = 1
}
}else
{
nums_next = now_id.substring(1,3);
}
$("#cont div").hide();
// Make all the top ones div The picture disappears.
// It's to make room 1 A picture came up.
$("#butt div").css({border:'#FF0000 0px solid'});
// Make the borders of all buttons disappear. It's to make it easier 1 The buttons have a border,
//alert("#"+"c"+nums_next)
$("#c"+nums_next).fadeIn() // Make the above picture fade out
$("#b"+nums_next).css({border:'#FF0000 1px solid'});
// Add a border to the corresponding button below, but you can also do other effects here
// The border is just for testing purposes
}
$(function(){ // When the page is loaded
auto = setInterval("tab_q()",2000); // Change the time of the switch here
$("#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>
I hope this article has been helpful to your jQuery programming.