相关阅读：
在网页上经常可以看到有背景图片可以自动淡入淡入切换的效果，非常漂亮，实用性也非常高。今天小编抽个时间给大家分享基于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代码实现图片墙自动+手动淡入淡出切换效果，希望对大家有所帮助，同时也非常感谢大家对武林网网站的支持！
新闻热点
疑难解答
