说明:使用Jquery切换图片!实际上是当每次点击span的时候,将span的html作为第 几个 image 的下标来实现图片的切换效果。
准备:需要切换的图片
本事例原理:
页面放置一张图片,当点击span的时候,替换图片的下标,详细的请看本事例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> <title>传值显示Div</title> <!-- 引入Jquery --> <script type="text/javascript" src="Script/jquery-1.3.2.min.js" language="javascript"></script> <!-- 样式 --> <style type="text/css"> .spanA { background-image:url('Image/sbg.png'); background-repeat:no-repeat; cursor:pointer; padding:5px; font-size:10px; } </style> </head> <body> <div style="position:relative;1024px;height:768px;background-image:url('Image/bg.png');background-repeat:no-repeat;margin:0 auto;"> <div style="margin-left:40px; font-size:26px;"> <br /> 图片切换效果.... </div> <br /><br /><br /><br /> <div></div><br /><div></div> <br /><div></div> <br /> <div> <table border="1" style="border-color:#d4f6f6" cellspacing="0" cellpadding="20" width="340px" align="center"> <tr style="height:260px;"> <td> <div id="example" style="300px;height:200px;"> <img id="myImg" style="border-color:Yellow" src="Image/1.jpg" alt="01" > </div> <span class="spanA" >1</span> <span class="spanA">2</span> <span class="spanA">3</span> <span class="spanA">4</span> <span class="spanA">5</span> <span class="spanA">6</span> <span class="spanA">7</span> <span class="spanA">8</span> </td> </tr> </table> </div> <!-- bottom --> <div style="1024px;height:30px;bottom:10px; position:absolute;text-align:center; float:right;"> <span style="font-family:宋体;font-size:16px;">1999-2011 View photo © <span style="color:Red;font-size:20px;">彩</span><del style="color:Green;">色</del><span style="font-size:16px;color:black;">C</span>o<span style="font-size:14px;Color:blue;">d</span><span style="color:Black;font-size:14px;">e</span></span> </div> </div> <script language="javascript" type="text/javascript"> /* * 遍历span,获取span的文本值 * 让所有的div先隐藏,然后根据值让所选的div淡入 */ $("span").each(function (event) { $(this).mouseover(function (event) { $(this).css({ cursor: 'pointer' }); $(this).css({ "background-image": "url('Image/sbg1.png')" }); }).mouseout(function (event) { $(this).css({"background-image":"url('Image/sbg.png')"}); }); var num1 = $(this).html(); $(this).bind("click", function (event) { $("img").fadeOut("slow", function (event) { $("#myImg").attr("src", "Image/" + num1 + ".jpg").show(500); }); $("#myImg").fadeIn("fast"); }); }); </script> </body> </html>
效果:
1、
2、