jquery?實現智能炫酷的翻頁相冊效果
巧妙的運用?Html?的文檔屬性，大大減少jquery?的代碼量，實現了智能炫酷的翻頁相冊、兼容性很好，實現了代碼與標簽的完全分離
?1. [代碼]jquery 實現智能炫酷的翻頁相冊效果 ? ??

$(document).ready(function(e) {
? ? var ImgBox = $(".img-box"),
? ? ImgSpan = ImgBox.find("span"),
? ? ImgDiv = $(".img-box div"),
? ? BtnNext = $("#btn-next"),
? ? BtnPrve = $("#btn-prev"),
? ? Btn = $(".btn"),
? ? speed = 600,
? ? //設置動畫的運動時間
? ? Tick = 4000 + speed,
? ? //設置定時器的間隔時間
? ? n = 1,
? ? //設置張數計數器
? ? whichCl,
? ? //設置判斷點擊了哪一個按鈕?
? ? z = 0; //設置當前動畫計數器
? ? ImgSpan.html("第 " + n + " 張/共 " + ImgDiv.length + " 張");
? ? function Slider() { //動畫函數
? ? ? ? if (whichCl == "nextCl") {
? ? ? ? ? ? n++;
? ? ? ? ? ? if (n > ImgDiv.length) {
? ? ? ? ? ? ? ? n = 1;
? ? ? ? ? ? }
? ? ? ? ? ? z--;
? ? ? ? ? ? if (z < 0) {
? ? ? ? ? ? ? ? z = ImgDiv.length - 1;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? if (whichCl == "prevCl") {
? ? ? ? ? ? n--;
? ? ? ? ? ? if (n < 1) {
? ? ? ? ? ? ? ? n = ImgDiv.length;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? ImgSpan.html("第 " + n + " 張/共 " + ImgDiv.length + " 張");
? ? ? ? ImgDiv.eq(z).stop().animate({
? ? ? ? ? ? right: -(1.1 * ImgDiv.width())
? ? ? ? },
? ? ? ? speed,
? ? ? ? function() {
? ? ? ? ? ? if (whichCl == "nextCl") {
? ? ? ? ? ? ? ? ImgSpan.after($(this));
? ? ? ? ? ? }
? ? ? ? ? ? if (whichCl == "prevCl") {
? ? ? ? ? ? ? ? ImgBox.append($(this));
? ? ? ? ? ? }
? ? ? ? ? ? $(this).stop().animate({
? ? ? ? ? ? ? ? right: 0
? ? ? ? ? ? },
? ? ? ? ? ? speed);
? ? ? ? }) if (whichCl == "prevCl") {
? ? ? ? ? ? z++;
? ? ? ? ? ? if (z > ImgDiv.length - 1) {
? ? ? ? ? ? ? ? z = 0;
? ? ? ? ? ? }唯美動漫圖片
? ? ? ? }http://www.huiyi8.com/dongman/weimei/?
? ? ? ? ImgBox.stop().animate({
? ? ? ? ? ? right: 100
? ? ? ? },
? ? ? ? speed,
? ? ? ? function() {
? ? ? ? ? ? $(this).stop().animate({
? ? ? ? ? ? ? ? right: 0
? ? ? ? ? ? },
? ? ? ? ? ? speed)
? ? ? ? }) ImgSpan.stop().animate({
? ? ? ? ? ? left: 395
? ? ? ? },
? ? ? ? speed,
? ? ? ? function() {
? ? ? ? ? ? $(this).stop().animate({
? ? ? ? ? ? ? ? left: 295
? ? ? ? ? ? },
? ? ? ? ? ? speed)
? ? ? ? })
? ? }
? ? BtnNext.click(next_cl = function() {
? ? ? ? whichCl = "nextCl";
? ? ? ? Slider();
? ? }); //向右點擊事件啟動動畫函數
? ? BtnPrve.click(prev_cl = function() {
? ? ? ? whichCl = "prevCl";
? ? ? ? Slider();
? ? }); //向左點擊事件啟動動畫函數 ?
? ? Btn.hover(function() {
? ? ? ? clearTimeout(autoTime)
? ? },
? ? function() {
? ? ? ? autoTime = setInterval(next_cl, Tick);
? ? }) //當鼠標進入點擊按鈕時對定時器進行控制 ? ? ? ? ? ??
? ? autoTime = setInterval(next_cl, Tick); //模擬向右點擊事件定時啟動動畫函數，也可以使用 ?prev_cl向左啟動動畫函數?
});
?

轉載于:https://www.cnblogs.com/xkzy/p/3968629.html

總結

以上是生活随笔為你收集整理的jquery 实现智能炫酷的翻页相册效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。