jquery 图片轮换潇湘博客

最新推荐文章于 2022-06-20 21:03:47 发布

潇湘博客

最新推荐文章于 2022-06-20 21:03:47 发布

阅读量1.9k

点赞数

分类专栏： JS技术 JQUERY技术文章标签： jquery stylesheet function

本文链接：https://blog.csdn.net/fkedwgwy/article/details/2885323

版权

JS技术同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

JQUERY技术

47 篇文章 0 订阅

订阅专栏

--jquery 图片轮换潇湘博客

用JQ写最简单的图片轮换功能

<html>
<head>
  <script src="http://www.cssrain.cn/demo/1/SildeTab/jquery-1.2.6.pack.js" type="text/javascript"></script>
  <script>
   $(document).ready(function(){
     $("td img").one("click",function(){
        var index = $(this).attr("id");
        $("#idCodeDiv").fadeOut(500,function(){
           $("#idCodeDiv").attr({src:index+".jpg"});
           $("#idCodeDiv").fadeIn(500);
         });
       });
    });
   </script>
   <style rel="stylesheet" type="text/css">
    #idDIV{width:10%;padding:8px;background-color:#FFD700;font-family:verdana,tahoma;font-size:1em ;}
    #idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}
    </style>
</head>
<body>
  <div id="idDIV"><img id="idCodeDiv"></img></div>
   <div><table>
    <tr><td><img id="img1" src="img1.jpg"></img></td><td><img id="img2" src="img2.jpg"></img></td></tr>
    <tr><td><img id="img3" src="img3.jpg"></img></td><td><img id="img4" src="img4.jpg"></img></td></tr>
    </table></div>
</body>
</html>