jQuery点击切换背景图片特效代码下载


jQuery点击切换背景图片特效代码下载
jQuery点击切换背景图片特效代码下载以及点击切换、背景图片等js/jquery网页特效代码下载。

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>

3. 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>
<!--sucai58.com 专注html3+css3素材的网站-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>点击切换背景图片jQuery代码</title>
<!-- Site styles -->
<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>

相关推荐

发表评论

相关文章