jQuery点击图片相册掀开切换

1、新建html文档。

3、书写hmtl代码。<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>

5、书写并添加js代码。<script src="js/jquery.min.js"></script><script>$(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>

7、查看效果。