小博老師演示經常使用JQuery效果 ——圖片輪播

時間 2019-11-12

標籤老師演示經常使用 jquery 效果圖片欄目 JQuery 简体版

原文原文鏈接

[理論知識]javascript

咱們在實際開發應用程序的過程當中，常常會遇到圖片輪播的效果需求，本文小博老師就爲你們演示一下，如何使用JQuery框架實現圖片輪播的效果。css

[步驟解讀一]界面佈局java

首先咱們建立一個HTML頁面，核心代碼以下：jquery

<body>數組

<div align="center" id="div_document">瀏覽器

<div align="center" id="div_document_content">框架

函數

<div align="center" id="div_imgPlayer">佈局

動畫

</div>

<tr>

<th class="th_imgPlayer_controller">上海漕河涇</th>

<th class="th_imgPlayer_controller">深圳華強北</th>

<th class="th_imgPlayer_controller">南京新街口</th>

<th class="th_imgPlayer_controller">成都航空路</th>

<th class="th_imgPlayer_controller">北京回龍觀</th>

<th class="th_imgPlayer_controller">博爲峯教研</th>

</tr>

</table>

</div>

</div>

</body>

爲了美化頁面佈局，咱們添加css樣式，核心代碼以下：

<style>

body,div,img{margin:0px; border:0px; padding:0px;}

#div_document{width:100%;}

#div_document_content{width:1366px; position:relative;}

#div_imgPlayer{width:1036px; border:1px solid #ddd; padding:5px; margin-top:5px; position:relative;}

#div_imgPlayer_img{width:1024px; position:relative;}

#img_foreground{position:relative; z-index:2;}

#img_background{position:absolute;left:0px; top:0px; z-index:1;}

.th_imgPlayer_controller{ height:30px; border:1px solid #ddd; background-color:#265b99; color:#f6853a; cursor:pointer;}

</style>

使用瀏覽器訪問，看到頁面佈局效果以下：

[步驟解讀二]增長手動輪播效果

接下來小博老師爲你們演示，增長手動輪播的效果，當咱們點擊輪播控件時，圖片會按照被點擊的控件顯示相應圖片，核心代碼以下：

$(document).ready(function(){

// 定義數組，存放全部輪播圖片

var imgs = new Array("images/teamsh2.jpg","images/teamsz2.jpg","images/teamnj2.jpg","images/teamcd2.jpg","images/teambj2.jpg","images/team2.jpg");

// 定義索引，存放當前顯示圖片的索引

var index = 0;

// 讓第一個輪播控件樣式變化

$(".th_imgPlayer_controller").first().css({"color":"#265b99","background-color":"#f6853a"});

// 添加輪播控件的點擊事件

$(".th_imgPlayer_controller").click(function(){

// 先將全部的輪播控件樣式恢復成默認樣式

$(".th_imgPlayer_controller").css({"color":"#f6853a","background-color":"#265b99"});

// 改變當前被點擊的輪播控件的樣式

$(this).css({"color":"#265b99","background-color":"#f6853a"});

// 中止正在播放的動畫

$("#img_foreground").stop(true,true);

// 獲取當前被點擊的輪播控件的索引

index = $(".th_imgPlayer_controller").index( $(this) );

// 改變背景預加載圖片的src

$("#img_background").attr("src",imgs[index]);

// 前景顯示圖片逐漸消失，用戶看見背景預加載圖片

$("#img_foreground").fadeOut(1000,function(){

// 改變前景顯示圖片的src

$(this).attr("src",imgs[index]);

// 將前景顯示圖片從新顯示出來

$(this).fadeIn();

});

</script>

經過瀏覽器訪問，如今咱們點擊輪播控件後，就會顯示相應的圖片了：

[步驟解讀三]增長自動輪播效果

接下來小博老師爲你們演示下，添加自動輪播的效果，用戶不點擊輪播控件時，圖片會依次按順序切換，增長javascript核心代碼以下：

// 定義圖片自動輪播的函數

function auto(){

// 改變當前要顯示的輪播圖片的索引

index = ++index >= imgs.length?0:index;

// 先將全部的輪播控件樣式恢復成默認樣式

$(".th_imgPlayer_controller").css({"color":"#f6853a","background-color":"#265b99"});

// 改變當前要顯示的輪播圖片對應的輪播控件的樣式

$(".th_imgPlayer_controller").eq(index).css({"color":"#265b99","background-color":"#f6853a"});

// 中止正在播放的動畫

$("#img_foreground").stop(true,true);

// 改變背景預加載圖片的src

$("#img_background").attr("src",imgs[index]);

// 前景顯示圖片逐漸消失，用戶看見背景預加載圖片

$("#img_foreground").fadeOut(1000,function(){

// 改變前景顯示圖片的src

$(this).attr("src",imgs[index]);

// 將前景顯示圖片從新顯示出來

$(this).fadeIn();

});

}

// 定義計時器

var timer = window.setInterval(auto,5000);

// 鼠標進入輪播界面時，暫停自動輪播；鼠標離開輪播界面時，恢復自動輪播

$("#div_imgPlayer").hover(function(){

window.clearInterval(timer);

},function(){

timer = window.setInterval(auto,5000);

});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。