分享

jQuery相册图片掀开切换代码

 昵称48806104 2017-10-25 发布于福建

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www./1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery相册图片掀开切换代码 - </title>

 

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

 

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

<script type="text/javascript">

$(function(){  

                    

         var interval;

         $(".container img").click(function cover(){

                            $(this).addClass("zoom").fadeOut(700,append);           

                            function append(){

                            $(this).removeClass("zoom").appendTo(".container").show();

                            var name = $(".container").children("img").first().attr("alt");

                             $(".name p").text("No "+name);

                            }       

          

         })

        

         function auto(){

                            var play = $(".container").children("img").first();

                            play.addClass("zoom").fadeOut(700,append);                

                            function append(){

                            $(this).removeClass("zoom").appendTo(".container").show();

                            var name = $(this).parent().children("img").first().attr("alt");

                             $(".name p").text("No "+name);

                            }

                            interval = setTimeout(auto,5000);

         }

        

         $(".container img").hover(function(){

                            stopPlay();

         },function(){

                            interval = setTimeout(auto,5000);

         })

        

         function stopPlay(){

                   clearTimeout(interval)

         }

         auto();

                                              

})

</script>

 

</head>

<body>

 

<div class="container" style="margin-top:100px">

  <img src="images/a1.png" alt="1" />

  <img src="images/a2.png" alt="2" />

  <img src="images/a3.png" alt="3" />

  <img src="images/a4.png" alt="4" />

  <img src="images/a5.png" alt="5" />

</div>

<div class="name">

<p>No 1</p>

</div>

 

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

<p>适用浏览器:360FireFoxChromeSafariOpera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>

<p>来源:<a href="http://down./" target="_blank"></a></p>

</div>

</body>

</html>

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多