jQuery代碼實現(xiàn)圖片墻自動+手動淡入淡出切換效果
相關閱讀：
在網頁上經?？梢钥吹接斜尘皥D片可以自動淡入淡入切換的效果，非常漂亮，實用性也非常高。今天小編抽個時間給大家分享基于jquery代碼實現(xiàn)圖片墻自動+手動淡入淡出切換效果，一起學習吧！
先給大家展示效果圖，如果大家覺得還不錯，請參考具體實現(xiàn)代碼。
添加一個div（class=container），設置寬度和高度，這里設置了寬800px，高450px。添加居中的定位。在div里面添加一個ul(class="img")列表用來盛放圖片，設置ul里面的li標簽position為absolute，這時圖片會重合在一起，同時設置display為none。圖片設置寬度和高度與container相同。在container里面再添加一個ul列表用來盛放下面的一排數(shù)字，然后進行相應的定位和設置。添加兩個div：left和right，分別是左右兩個按鈕，進行相應的定位和設置，里面的箭頭分別是大于號和小于號。
實現(xiàn)思路及原理介紹：
當鼠標移動到對應的數(shù)字上面的時候，用$(this).index()獲得數(shù)字所在容器里面的序號，然后將序號傳遞到eq()函數(shù)里面獲得 li 標簽，然后添加函數(shù)fadeIn();這樣隱藏的圖片就顯示出來了，同時調用sibling().fadeOut()，讓同級的兄弟節(jié)點隱藏起來，這樣之前顯示的圖片就隱藏了起來。
添加setInterval()函數(shù)，讓圖片每隔相同的時間變換一次。
我覺得一個主要的問題就是自動切換和手動切換的沖突，當鼠標移動到圖片上面的時候應該停止自動切換，在這里用的方法是：
給container添加hover函數(shù)，當鼠標移動到container里面的時候用clearInterval()函數(shù)去掉時間間隔函數(shù)，這樣當鼠標移動到圖片上面的時候，圖片就不會切換了，當鼠標移出的時候添加setInterval()函數(shù)。這樣圖片就能繼續(xù)切換了。
注意：i 和 t 需要設置成全局變量，這樣不同的函數(shù)才能共用。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>
以上是小編給大家?guī)淼膉Query代碼實現(xiàn)圖片墻自動+手動淡入淡出切換效果，希望對大家有所幫助，同時也非常感謝大家對腳本之家網站的支持！
相關文章
下面小編就為大家分享一篇zTree樹形菜單的使用實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
JQuery select控件的相關操作實現(xiàn)代碼
JQuery獲取和設置Select選項方法匯總如下，需要的朋友可以參考下2012-09-09
這篇文章主要介紹了jQuery實現(xiàn)帶動畫效果的多級下拉菜單代碼,可實現(xiàn)點擊漸隱漸顯效果,涉及jQuery頁面元素的遍歷及鏈式操作相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
本篇文章主要是對JQuery的$和其它JS發(fā)生沖突的快速解決方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
jquery實現(xiàn)點擊TreeView文本父節(jié)點展開/折疊子節(jié)點
今天客戶提出要點擊菜單（TreeView實現(xiàn)的）的父級節(jié)點時，展開節(jié)點,很多新手朋友可能對此會很陌生，接下來介紹解決方法，感興趣的朋友可以了解下2013-01-01
這篇文章主要為大家詳細介紹了基于jquery二維碼生成插件qrcode的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
本文通過實例代碼給大家分享了jQuery實現(xiàn)火車票買票城市選擇切換功能，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
本文主要對jQuery實現(xiàn)6位數(shù)字密碼輸入框的大概思路、實現(xiàn)代碼進行詳細介紹，具有一定的參考價值，需要的朋友一起來看下吧2016-12-12
jQuery操作Select的Option上下移動及移除添加等等
jQuery操作Select Option：向上移動選中的option、向下移動選中的option、移除選中的option、獲取所有的option值、添加option等等，下面有個不錯的示例，感興趣的朋友不要錯過2013-11-11
這篇文章主要介為大家詳細紹了jquery小火箭返回頂部特效，當用戶瀏覽到網頁的最下端時，點擊右下角的火箭可以返回到頁面最頂部，滾動效果平滑，有需要的小伙伴可以參考下。2015-08-08