首頁

JS特效

jQuery特效

jQuery Banner的圖片旋轉切換特效

jQuery Banner圖片旋轉切換特效

現在下載預覽

js程式碼
<腳本>
$(函數 () {
/*圖片位置資料*/
var 資料 = [
{'z-index': 6, 不透明度: 1, 寬度: 760, 高度: 330, 頂部: 40, 左側: 0},
{'z-index': 4, 不透明度: 0.6, 寬度: 560, 高度: 243, 頂部:80, 左側: -225},
{'z-index'：3，不透明度：0.4，寬度：480，高度：203，上方：-10，左側：-170}，
{'z-index'：2，不透明度：0.2，寬度：620，高度：269，上方：-60，左側：110}，
{'z-index'：3，不透明度：0.4，寬度：480，高度：203，上方：-10，左側：430}，
{'z-index'：4，不透明度：0.6，寬度：560，高度：243，上方：80，左側：420}，
]
移動（）；

函數移動() {
/*圖片分配*/
for (var i = 0; i < datas.length; i++) {
var data = datas[i];
$('#slide ul li').eq(i).css('z-index',data['z-index']);
$('#slide ul li').eq(i).stop().animate(data, 1200);
}
}

/*左箭頭事件*/
$('.prev').on('點選', function () {
var last = datas.pop();
datas.unshift(最後);

移動（）；
})

/*右箭頭事件處理函數*/
函數 nextYewu(){
var 首先 = datas.shift();
datas.push(第一個);
移動（）；
}
/*右箭頭事件*/
$('.next').on('click', nextYewu);

/*自動播放*/
var 計時器 = setInterval(function(){
nextYewu();
},5000);
/*滑鼠進入投影片顯示箭頭,清除自動播放*/
$('#slide').on({
mouseenter: 函數 () {
$('.arrow').css('顯示', '區塊');
清除間隔(定時器);
}, mouseleave: 函數 () {
$('.arrow').css('顯示', '無');
/*滑鼠離開時自動播放*/
清除間隔(定時器);
定時器 = setInterval(function(){
nextYewu();
},5000)
}
})
})

</腳本>

這是一款仿海風教育的師資頁面力量的網站橫幅圖片切換特效，jQuery圖片旋轉切換代碼。

免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性！本站所有資源僅供學習參考。請不要將它們用於商業目的。否則，一切後果都由您負責！如有侵權，請聯絡我們刪除。聯絡方式：admin@php.cn

10 jQuery酷菜單效果插件

01 Mar 2025

10款炫酷jQuery菜單特效插件，提升網站用戶體驗！我們已經分享了許多jQuery導航菜單插件，現在又為您帶來10款令人驚豔的jQuery菜單特效插件。盡情享受吧！相關閱讀：- 10款炫麗jQuery導航菜單- 15款優秀的jQuery導航菜單右鍵菜單這款插件非常易於使用，體積小巧，可以創建右鍵菜單。源碼演示 2. jQuery多級菜單 – 帶子菜單的FX CSS菜單 100% CSS菜單，由jQuery提供視覺特效。僅使用Javascript實現特效。完全兼容跨瀏覽器，包

10個jQuery插件可提供酷炫效果

27 Feb 2025

這篇文章展示了十個傑出的jQuery插件，可提供獨特的視覺效果。讓我們探索這些插件及其功能！ jQuery鏡頭耀斑效果插件：此插件毫不費力地為Yo添加了時尚的鏡頭效果

jQuery 如何有效率地選擇具有特定 CSS 屬性的元素？

30 Nov 2024

在 jQuery 中選擇具有特定 CSS 屬性的元素問題：我們如何有效地選擇擁有特定 CSS 屬性的所有元素...

如何在 jQuery 中擷取滑鼠滾輪事件？

26 Oct 2024

在 jQuery 中擷取滑鼠滾輪事件 jQuery 提供了一種有效的方法來擷取特定的滑鼠滾輪事件，與滾動事件不同。這...

如何使用 jQuery 和 JavaScript 高效解析和顯示 JSON 資料？

06 Dec 2024

使用 jQuery 和 JavaScript 解析 JSON 資料這個簡短的教程解決了有效操作 JSON 資料的挑戰，特別是...

8個很酷的jQuery動畫效果教程

26 Feb 2025

jQuery動畫效果教程：告別Flash動畫，擁抱jQuery動畫時代！過去，網站上的動畫效果通常都依賴Flash。但現在，有了jQuery，您可以輕鬆創建各種動畫效果。以下是一些jQuery動畫效果教程，助您開啟動畫之旅！相關閱讀： 10款CSS3和jQuery加載動畫解決方案 3D JavaScript動畫——three.js 仿Foursquare的jQuery動畫式Feed顯示本教程將向您展示如何使用jQuery輕鬆創建一個RSS滾動字幕效果。源碼演示 jQue

選擇從jQuery ajax響應字符串返回的元素的秘密

24 Feb 2025

本文演示瞭如何通過利用JQuery的選擇引擎通過AJAX調用從靜態頁面提取特定的HTML片段來有效地重複使用內容。該技術在處理時特別有用

7很酷的jQuery移動插件

25 Feb 2025

7款超讚的jQuery Mobile插件，讓你的移動設備網頁更出色！如今，智能手機配備了高效的網頁瀏覽器，我們特此推薦7款酷炫的jQuery Mobile插件，提升移動設備用戶體驗。以下插件將讓你的移動設備使用更便捷！相關文章： 4 jQuery Mobile 價格滑塊 (範圍選擇) 50 個 jQuery Mobile 開發技巧 jQuery Wiggle 插件：為移動設備帶來晃動效果 jQuery Wiggle 是一款 jQuery 插件，可模擬 iPhone 長按圖標時的晃