您现在的位置是:首页  >  前端 >  前端开发 JavaScript

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

博主 添加时间:2017-05-11 23:50:30 【JavaScript】 热度:260人已围观

相关阅读:

Jquery代码实现图片轮播效果(一)

在网页上经常可以看到有背景图片可以自动淡入淡入切换的效果,非常漂亮,实用性也非常高。今天小编抽个时间给大家分享基于jquery代码实现图片墙自动+手动淡入淡出切换效果,一起学习吧!

先给大家展示效果图,如果大家觉得还不错,请参考具体实现代码。


添加一个p(class=container),设置宽度和高度,这里设置了宽800px,高450px。添加居中的定位。在p里面添加一个ul(class="img")列表用来盛放图片,设置ul里面的li标签position为absolute,这时图片会重合在一起,同时设置display为none。图片设置宽度和高度与container相同。在container里面再添加一个ul列表用来盛放下面的一排数字,然后进行相应的定位和设置。添加两个p: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():找到该元素的索引值

有兴趣的研究一下代码:




jquery_img_switch
  • 相关文章
  • 用JS判断浏览器类型的代码

    一般的浏览器类型都可以通过js来判断出来,当然,少数例外(例如:360浏览器,它会隐藏自己的外壳,原因我就不解释,明白人都懂的)。今天给大家分享的是一个通过原生js写的判断浏览器类型的小例子。 原理大致如下:每一个浏览器的UA不同,例如火狐浏览器的UA是Firefox,IE浏览器的UA是MSIE,Chrome浏览器的UA是Chrome,搜狗浏览器的UA是SE,遨游浏览器的UA是Maxthon,然后通过UA就可以判断出来。代码也很容易看懂,大家请看:你现在的类型是(可以换个浏览器打开这个页面试试效果):Safari浏览器

  • JavaScript跨域的问题父子页面之间跨域通信的方法

     由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案 ...

  • JavaScript继承学习笔记【新手必看】_javascript技巧

    下面小编就为大家带来一篇JavaScript继承学习笔记。小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...

  • JavaScript根据CSS的Media Queries来判断浏览设备的方法_javascript技巧

    这篇文章主要介绍了JavaScript根据CSS的MediaQueries来判断浏览设备的方法,主要思路是通过CSSMediaQueries改变一个类的某个属性值(例如z-index),然后用JavaScript读取判断,需要的朋友可以参考下 ...

  • 原生javascript实现分享到朋友圈功能 支持ios和android_javascript技巧

    本文主要介绍网上一个牛人写的js可以实现在UC浏览器和QQ浏览器中调用浏览器内置的分享组件进行分享。 ...

文章评论

博客名片

职业:PHP程序员

现居:河南省-洛阳市

博客地址:www.lizongyang.cn

Email:5708837@qq.com

站点信息

  • 建站时间:2019-03-25
  • 网站程序:李宗洋博客
  • 联系电话:15888888888
  • 文章统计4084篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们

打赏本站

  • 如果你觉得本站很棒,可以通过扫码支付打赏哦!
  • 微信扫码:你说多少就多少~
  • 支付宝扫码:你说多少就多少~

客服在线

服务时间

周一至周日 9:00-21:00