首頁 JS特效 jQuery特效 jQuery Banner的圖片旋轉切換特效

jQuery Banner的圖片旋轉切換特效

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

相關文章

jQuery圖片切換動畫特效 jQuery圖片切換動畫特效

08 Dec 2016

jQuery圖片切換動畫特效

HTML、CSS和jQuery:實作圖片旋轉特效的技巧 HTML、CSS和jQuery:實作圖片旋轉特效的技巧

25 Oct 2023

HTML、CSS與jQuery:實現圖片旋轉特效的技巧引言:在現代網頁設計中,為了帶給使用者更好的視覺體驗,圖片特效在網頁設計中扮演著重要的角色。其中,圖片旋轉特效既能吸引使用者的注意力,也能增添頁面的動態與時尚感。本文將介紹如何使用HTML、CSS和jQuery來實現圖片旋轉特效,並給出具體的程式碼範例。一、HTML結構:首先,我們需要建立一個基本的HTML結

jquery 圓形旋轉圖片滾動切換效果 jquery 圓形旋轉圖片滾動切換效果

04 Feb 2017

今回為大家介紹個圓形旋轉的效果,基於圓形的物理特性,又圓上任一點可以作為一個控制按鈕,然後拖動它來使圖片輪換。

jquery淡化版banner非同步圖片文字效果切換圖片特效_jquery jquery淡化版banner非同步圖片文字效果切換圖片特效_jquery

16 May 2016

全螢幕淡入淡出簡潔banner,非同步圖片文字效果切換圖片特效,需要的朋友可以參考下

JQuery實作簡單的圖片滑動切換特效_jquery JQuery實作簡單的圖片滑動切換特效_jquery

16 May 2016

基於jQuery的一張圖片展示特效程式碼,滑鼠移到圖片上方懸停時會自動切換成文字簡單顯示,適合做圖片集展示,推薦給大家。

基於jQuery外掛實現環形圖示選單旋轉切換特效_jquery 基於jQuery外掛實現環形圖示選單旋轉切換特效_jquery

16 May 2016

本文跟大家分享一款基於jQuery環形圖示旋轉切換特效。這是一款滑鼠點擊圖示選單圓形順時針或逆時針旋轉切換代碼。有需要的小夥伴可以參考下。

jquery實現LED廣告看板旋轉系統圖片切換效果 jquery實現LED廣告看板旋轉系統圖片切換效果

04 Feb 2017

這篇文章主要介紹了jquery實現LED廣告看板旋轉系統圖片切換效果類似路邊場景,很實用的程式碼,推薦給大家,有需要的小夥伴可以參考下。

HTML、CSS和jQuery:實現圖片透明度切換特效的技巧 HTML、CSS和jQuery:實現圖片透明度切換特效的技巧

25 Oct 2023

HTML、CSS和jQuery:實現圖片透明度切換特效的技巧在現代的網頁設計中,圖片透明度切換特效已經成為了一個非常常見的設計要素。透過控制圖片的透明度變化,可以為網頁增添動態效果,提升使用者體驗。而實現這樣的特效,我們可以運用HTML、CSS和jQuery,以下將介紹具體的技巧,並附上程式碼範例。 HTML部分首先,我們需要在HTML中建立圖片和對應的控制按鈕

jquery的幻燈片圖片切換效果代碼分享_jquery jquery的幻燈片圖片切換效果代碼分享_jquery

16 May 2016

這篇文章主要介紹了jquery的幻燈片圖片切換效果,幻燈片圖片切換效果特別適合做產品演示,感興趣 的小夥伴可以參考下。

See all articles See all articles

Hot Tools

jQuery2019情人節表白放煙火動畫特效

jQuery2019情人節表白放煙火動畫特效

一款抖音上很火紅的jQuery情人節表白放煙火動畫特效,適合程式設計師、科技宅用來向心愛的女孩告白,無論你選擇願意或不願意,到最後都得同意。

layui響應式動畫登入介面模板

layui響應式動畫登入介面模板

layui響應式動畫登入介面模板

520情人節表白網頁動畫特效

520情人節表白網頁動畫特效

jQuery情人節表白動畫、520表白背景動畫

酷炫的系統登入頁

酷炫的系統登入頁

酷炫的系統登入頁

HTML5卡音樂播放器-CASSETTE PLAYER

HTML5卡音樂播放器-CASSETTE PLAYER

HTML5卡音樂播放器-CASSETTE PLAYER