jquery?實(shí)現(xiàn)智能炫酷的翻頁(yè)相冊(cè)效果
巧妙的運(yùn)用?Html?的文檔屬性，大大減少jquery?的代碼量，實(shí)現(xiàn)了智能炫酷的翻頁(yè)相冊(cè)、兼容性很好，實(shí)現(xiàn)了代碼與標(biāo)簽的完全分離
?1. [代碼]jquery 實(shí)現(xiàn)智能炫酷的翻頁(yè)相冊(cè)效果 ? ??

$(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,
? ? //設(shè)置動(dòng)畫的運(yùn)動(dòng)時(shí)間
? ? Tick = 4000 + speed,
? ? //設(shè)置定時(shí)器的間隔時(shí)間
? ? n = 1,
? ? //設(shè)置張數(shù)計(jì)數(shù)器
? ? whichCl,
? ? //設(shè)置判斷點(diǎn)擊了哪一個(gè)按鈕?
? ? z = 0; //設(shè)置當(dāng)前動(dòng)畫計(jì)數(shù)器
? ? ImgSpan.html("第 " + n + " 張/共 " + ImgDiv.length + " 張");
? ? function Slider() { //動(dòng)畫函數(shù)
? ? ? ? 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;
? ? ? ? ? ? }唯美動(dòng)漫圖片
? ? ? ? }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();
? ? }); //向右點(diǎn)擊事件啟動(dòng)動(dòng)畫函數(shù)
? ? BtnPrve.click(prev_cl = function() {
? ? ? ? whichCl = "prevCl";
? ? ? ? Slider();
? ? }); //向左點(diǎn)擊事件啟動(dòng)動(dòng)畫函數(shù) ?
? ? Btn.hover(function() {
? ? ? ? clearTimeout(autoTime)
? ? },
? ? function() {
? ? ? ? autoTime = setInterval(next_cl, Tick);
? ? }) //當(dāng)鼠標(biāo)進(jìn)入點(diǎn)擊按鈕時(shí)對(duì)定時(shí)器進(jìn)行控制 ? ? ? ? ? ??
? ? autoTime = setInterval(next_cl, Tick); //模擬向右點(diǎn)擊事件定時(shí)啟動(dòng)動(dòng)畫函數(shù)，也可以使用 ?prev_cl向左啟動(dòng)動(dòng)畫函數(shù)?
});
?

轉(zhuǎn)載于:https://www.cnblogs.com/xkzy/p/3968629.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。