jQuery鼠标点击切换背景图片代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标点击切换背景图片代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jQuery鼠标点击切换背景图片代码</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript">
function switchbox(a) {
    a == 1 ? $(".slide.slide3 .arrowcontainer").show() : $(".slide.slide3 .arrowcontainer").hide(),
    $(".slide.slide3").removeClass("s1").removeClass("s2").removeClass("s3").removeClass("s4").removeClass("s5"),
    $(".slide.slide3").addClass("s" + a),
    $(".slide.slide3 .img" + a).addClass("selected"),
    $(".slide.slide3 .content").hide(),
    $(".slide.slide3 .content.content" + a).show(),
    $(".slide.slide3 .bgimg").remove()
}
</script>

</head>
<body class="slide slide3 s1">

<div id="demo">
	<div class="pane"> 
		<div class="cont"></div> 
		<div class="arrowcontainer">
			<div class="arrow"> Click me! <img src="images/curvyarrow.png"> </div>
		</div>
		<div class="icons">
			<a onclick="switchbox(1);" href="javascript:void(0);"><img class="img1 selected" alt="" src="images/icon.png"></a> 
			<a onclick="switchbox(2);" href="javascript:void(0);"><img alt="" class="img2" src="images/icon2.png"> </a> 
			<a onclick="switchbox(3);" href="javascript:void(0);"><img alt="" class="img3" src="images/icon5.png"></a> 
			<a onclick="switchbox(4);" href="javascript:void(0);"><img alt="" class="img4" src="images/icon4.png"> </a> 
			<a onclick="switchbox(5);" href="javascript:void(0);"><img alt="" class="img5" src="images/icon3.png"></a> 
		</div> 
	</div> 
</div>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";html,body{font-size:10px;line-height:10px;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;}
h2,p{margin:0;padding:0;line-height:1.3em;}
h2{color:#333;font:normal normal 2.5em/1.5em Impact,sans-serif;white-space:nowrap;padding:5px 0;}
p{font:1em/1.5em Arial,Helvetica,sans-serif;margin:0.8em 0;}
a,img{border:0;}
#demo{width:800px;margin:0 auto;position:relative;overflow:hidden;}
/* - - - - - - - - - - */
.slide .pane{text-align:center;width:750px;margin:0 auto;z-index:1;overflow:hidden;}
.slide.slide3 .icons{height:200px;margin:0 auto 0;text-align:center;width:500px;}
.slide.slide3 .arrowcontainer{position:relative;}
.slide.slide3 .arrow{color:#FFFFFF;font-size:150%;left:160px;position:absolute;top:-90px;width:130px;font-weight:bold;}
.slide.slide3 .arrow img{float:right;}
.slide.slide3 .cont{width:100%;margin:0 auto 150px;overflow:hidden}
.slide.slide3 .icons img{cursor:pointer;display:block;float:left;margin:0;padding:10px;}
.slide.slide3 .icons img:hover{background:url(../images/glow2.png) repeat scroll 0 0 transparent;}
.slide.slide3 .content2,.slide.slide3 .content3,.slide.slide3 .content4,.slide.slide3 .content5{display:none}
.slide.slide3.s1{background:url(../images/landingbg1.png);overflow:hidden}
.slide.slide3.s2{background:url(../images/landingbg2.png);overflow:hidden}
.slide.slide3.s3{background:url(../images/landingbg3.png);overflow:hidden}
.slide.slide3.s4{background:url(../images/landingbg4.jpg);overflow:hidden}
.slide.slide3.s5{background:url(../images/landingbg5.gif);overflow:hidden}

附件:下载该文件资源,减少时间成本(增值服务)