基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效。效果图如下：
实现的代码。
html代码：
<div class="container">
<img src="data:images/1.jpeg" alt="1" />
<img src="data:images/2.jpeg" alt="2" />
<img src="data:images/3.jpeg" alt="3" />
<img src="data:images/4.jpeg" alt="4" />
<img src="data: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();
})