jquery图片切换实例分析

时间：2021-05-26

本文实例讲述了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" 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程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章