相關閱讀：
在網頁上經?？梢钥吹接斜尘皥D片可以自動淡入淡入切換的效果，非常漂亮，實用性也非常高。今天小編抽個時間給大家分享基于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代碼實現圖片墻自動+手動淡入淡出切換效果，希望對大家有所幫助，同時也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
