jQuery程式碼實現圖片牆自動+手動淡入淡出切換效果

首頁

web前端

js教程

jQuery程式碼實現圖片牆自動+手動淡入淡出切換效果_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:01 PM

相關閱讀：

Jquery程式碼實現圖片輪播效果（一）

在網頁上經常可以看到有背景圖片可以自動淡入淡入切換的效果，非常漂亮，實用性也非常高。今天小編抽個時間跟大家分享基於jquery代碼實現圖片牆自動+手動淡入淡出切換效果，一起學習吧！

先給大家展示效果圖，如果大家覺得還不錯，請參考具體實現程式碼。

新增一個div（class=container），設定寬度和高度，這裡設定了寬800px，高450px。添加居中的定位。在div裡面加入一個ul(class="img")清單用來盛放圖片，設定ul裡面的li標籤position為absolute，這時圖片會重合在一起，同時設定display為none。圖片設定寬度和高度與container相同。在container裡面再增加一個ul列表用來盛放下面的一排數字，然後進行對應的定位和設定。增加兩個div：left和right，分別是左右兩個按鈕，進行對應的定位和設置，裡面的箭頭分別是大於號和小於號。

實現思路及原理介紹：

當滑鼠移到對應的數字上面的時候，用$(this).index()取得數字所在容器裡面的序號，然後將序號傳遞到eq()函數裡面取得li 標籤，然後加入函數fadeIn( );這樣隱藏的圖片就顯示出來了，同時調用sibling().fadeOut()，讓同級的兄弟節點隱藏起來，這樣之前顯示的圖片就隱藏了起來。

加入setInterval()函數，讓圖片每隔相同的時間轉換一次。

我覺得一個主要的問題就是自動切換和手動切換的衝突，當滑鼠移動到圖片上面的時候應該停止自動切換，這裡用的方法是：

為container添加hover函數，當滑鼠移動到container裡面的時候用clearInterval()函數去掉時間間隔函數，這樣當滑鼠移動到圖片上面的時候，圖片就不會切換了，當滑鼠移出的時候添加setInterval()函數。這樣圖片就能繼續切換了。

注意：i 和 t 需要設定成全域變量，這樣不同的函數才能共用。 i 表示目前顯示圖片的索引。 t 是setInterval的ID。當滑鼠移出的時候不用再var一個t了，只需：t=setInterval(time_fun,1500);即可。

eq(n):找出第n個元素

eg：$('li').eq(2).css('background-color', 'red');//設定第二個li標籤的背景顏色為紅色

index():找出該元素的索引值

有興趣的研究一下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>jquery_img_switch</title>
</head>
<style type="text/css">
*{
margin: ;
padding: ;
}
.container{
width: px;
height: px;
margin: px auto;
position: relative;
}
.container .img{
list-style: none;
/*position: absolute;*/
}
.container .img li{
position: absolute;
display: none;
}
.container .img img{
width: px;
height: px;
}
.container .num{
position: absolute;
list-style: none;
font-size: ;
bottom: px;
width: %;
text-align: center; 
}
.container .num li{
width: px;
height: px;
background: rgba(,,,.);
border-radius: %;
color: #;
display: inline-block;
line-height: px;
text-align: center;
font-size: px;
margin-right: px;
cursor: pointer;
}
.left, .right{
width: px;
height: px;
text-align: center;
line-height: px;
background-color: rgba(,,,.);
color: #fff;
position: absolute;
top: %;
margin-top: -px; 
font-size: px;
cursor: pointer;
}
.left{
left: px;
}
.right{
right: px;
}
.container .num .active{
background: rgba(,,,);
color: #fff;
}
</style>
<script type="text/javascript" src="../jquery-...min.js"></script>
<script type="text/javascript">
var i=;
var t;
$(document).ready(function(){
$(".container .img li").eq(i).fadeIn().siblings().fadeOut(); 
$(".container .num li").on("mouseover",active);
t=setInterval(time_fun,);
$(".container").hover(in_fun,out_fun);
$(".container .left").on("click",left_fun);
$(".container .right").on("click",right_fun);
});
function time_fun(){
i++;
if(i==){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
function in_fun(){
clearInterval(t);
}
function out_fun(){
t=setInterval(time_fun,);
}
function active(){
$(this).addClass("active").siblings().removeClass("active");
$(".container .img li").eq($(this).index()).fadeIn().siblings().fadeOut();
i=$(this).index();
}
function left_fun(){
i--;
if(i==-){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
function right_fun(){
i++;
if(i==){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
</script>
<body>
<div class="container">
<ul class="img">
<li ><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
</ul>
<ul class="num">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="left"><</div>
<div class="right">></div>
</div>
</body>
</html>

登入後複製

以上是小編給大家帶來的jQuery代碼實現圖片牆自動+手動淡入淡出切換效果，希望對大家有所幫助，同時也非常感謝大家對腳本之家網站的支持！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7647

CakePHP 教程

1392

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT迷你填字遊戲答案

110

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

誰得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。