基于jquery鼠标点击图片翻开切换效果

基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

<div class="container">
        <img src="images/1.jpeg" alt="1" />
        <img src="images/2.jpeg" alt="2" />
        <img src="images/3.jpeg" alt="3" />
        <img src="images/4.jpeg" alt="4" />
        <img src="images/5.jpeg" alt="5" />
    </div>
    <div class="name">
        <p>No 1</p>
    </div>

js代码：

$(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();

        })

via：http://***/Article/45764

转载于:https://www.cnblogs.com/liaohuolin/p/4634989.html