jQuery代码实现图片墙自动和手动淡入淡出切换效果

相关阅读：

用Jquery代码实现照片轮播效果(一)。

在网页上经常可以看到背景图片可以自动淡入淡出的效果，非常美观实用。今天，边肖花点时间和大家分享一下基于jquery代码的图片墙自动和手动淡入淡出切换效果。让我们一起学习吧！

先给你看效果图。如果觉得还不错，请参考具体实现代码。

添加一个div(class=container)并设置宽度和高度，其中宽度为800px，高度为450px。添加居中定位。在div中添加一个ul(class='img ')列表来保存图片，将ul中li标签的位置设置为绝对，然后图片将重叠，并将显示设置为无。将图片的宽度和高度设置为与容器相同。在容器中添加另一个ul列表来保存下面一行数字，然后相应地定位和设置它。添加两个div:左和右，这是左和右按钮，并相应地定位和设置它们。里面的箭头分别是大于号和小于号。

实现思想和原则介绍：

当鼠标移动到相应的数字上时，使用$(this)。index()获取编号所在容器中的序列号，然后将序列号传递给eq()函数获取li标签，再添加函数fadeIn()；这样，隐藏的图片就显示出来了，而且是兄弟()。调用fadeOut()隐藏同一级别的兄弟节点，从而隐藏之前显示的图片。

添加setInterval()函数，使图片同时发生变化。

我认为主要问题之一是自动切换和手动切换的冲突。当鼠标在图片上移动时，自动切换应该停止。这里使用的方法是：

在容器中增加悬停功能，使用clearInterval()函数去掉鼠标移入容器时的时间间隔功能，使鼠标移过图片时图片不会切换，鼠标移出时增加setInterval()函数。这样图片就可以继续切换了。

注意：I和t需要设置为全局变量，这样可以共享不同的函数。I表示当前显示图片的索引。是设置间隔的标识。鼠标移出时，不需要再var另一个t，只需：t=setInterval(time_fun，1500)；你可以。

方程(n):找到了第n个元素。

例：$('li ')。等式(2)。css('背景色'，'红色')；//将第二个li标签的背景颜色设置为红色。

Index():查找此元素的索引值。

对研究代码感兴趣：

！DOCTYPE html html lang=' en ' hearta charset=' UTF-' title jquery _ img _ switch/title/head style type=' text/CSS ' * { margin :padding: }。容器{ width: px高度：像素；余量：像素汽车；相对位置：}.集装箱img { list-style : none；/*位置：绝对值；*/}.集装箱img li{position:绝对值；显示器：无；}.集装箱img img {宽度：像素高度：像素；}.集装箱num{position:绝对值；列表样式：无；字号：底部：像素宽度：%;文本对齐：中心；}.集装箱num li {宽度：像素高度：像素；背景： rgba(，);边界半径：%;颜色： #；显示器：内联块；线高：像素；文本对齐：中心；font-size : px右边距：像素；光标：指针；}.向左，向右。右侧{ width: px高度：像素；文本对齐：中心；线高：像素；背景-color: rgba(，);color: # fff绝对位置：top : margin-top :-px；font-size : px光标：指针；}.左{ left: px}。右{ right: px}。集装箱。计算器active{background: rgba(，)；color: # fff}/style脚本类型=' text/JavaScript ' src=' http :/jquery-.量滴js '/script脚本类型=' text/JavaScript ' var I=；var t；$(文档)。ready(function(){$(')).集装箱李)的作品.方程式(I ).fadeIn().兄弟姐妹()。淡出()；$('.集装箱李' .打开('鼠标悬停'，活动);t=setInterval(time_fun，)；$('.容器')。悬停(in_fun，out _ fun)；$('.集装箱。左')。on('click '，left _ fun)；$('.集装箱。右')。on('click '，right _ fun)；});函数time _ fun(){ I；if(I==){ I=；}$('.集装箱李' .方程式(I ).addClass('active ').兄弟姐妹()。移除CLaSS(' active ')；$('.集装箱李)的作品.方程式(I ).fadeIn().兄弟姐妹()。淡出()；} fun _ fun(){ clearInterval(t)中的函数；}函数out _ fun(){ t=setInterval(time _ fun，}函数active(){$(this).addClass('active ').兄弟姐妹()。移除CLaSS(' active ')；$('.集装箱李)的作品.eq($(this)).index()).fadeIn().兄弟姐妹()。淡出()；i=$(这个)。index()；}函数left _ fun(){ I-；if(I==-){ I=；}$('.集装箱李' .方程式(I ).addClass('active ').兄弟姐妹()。移除CLaSS(' active ')；$('.集装箱李)的作品.方程式(I ).fadeIn().兄弟姐妹()。淡出()；}函数right _ fun(){ I；if(I==){ I=；}$('.集装箱李' .方程式(I ).addClass('active ').兄弟姐妹()。移除CLaSS(' active ')；$('.集装箱李)的作品.方程式(I ).fadeIn().兄弟姐妹()。淡出()；}/scriptbodydiv class=' container ' ul class=' img ' Li img src=' http :/./Img/.jpg '/Lili mg src=' http :/./Img/.jpg '/Lili mg src=' http :/./Img/.jpg '/Lili mg src=' http :/./Img/.jpg '/Lili mg src=' http :/./Img/.jpg '/Lili mg src=' http :/./Img/.jpg '/Lili mg src=' http :/./Img/.jpg '/Lili mg src=' http :/./Img/.jpg '/Lili mg src=' http :/./Img/.jpg '/Lili mg src=' http :/./Img/.jpg '/Li/ulul class=' num ' Li class=' active '/丽丽/丽丽/丽丽/丽丽/丽丽/丽丽/丽丽/Li/Li/uldiv class=' left '/div div class=' right '/div/div/body/html以上是小编给大家带来的框架代码实现图片墙自动手动淡入淡出切换效果，希望对大家有所帮助，同时也非常感谢大家对我们网站的支持！