Jquery 切换 图片

说明：使用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;width: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="width: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="width: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、

　　

 

posted @ 2011-01-13 19:24  序猿·徐  阅读(2070)  评论(0)    收藏  举报