你的位置:首页 > Java教程

[Java教程]基于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://www.w2bc.com/Article/45764