jQuery控制图片墙自动+手动淡入淡出切换
阅读原文时间:2023年08月22日阅读:3

先来看一下效果:http://39.105.101.122/myhtml/Jquery/img_switch/img_switch.html(甄嬛的眼睛有木有变大)

添加一个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():找到该元素的索引值

有兴趣的研究一下代码:

1
2 3 4 5 jquery_img_switch 6 7 76 77 132 133

134
    135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
146
    147
  • 1
  • 148
  • 2
  • 149
  • 3
  • 150
  • 4
  • 151
  • 5
  • 152
  • 6
  • 153
  • 7
  • 154
  • 8
  • 155
  • 9
  • 156
  • 10
  • 157
158
<
159
>
160
161 162