最简洁jQuery图片渐变切换
2018-03-15 00:00
162 查看
前几天修改一个图片渐变切换的兼容,发现调用的是一个插件,改起来很麻烦,一狠心自己花了半天写了一个,大概有五六十行,结果图片切换的时候闪屏比较厉害,然后坐在那里想怎么解决,同时去看看那个插件的实现思路,突然来了灵感花了几分钟写了下面这样一个图片切换代码,泪奔(白花了半天的时间,到最后就这么点代码)...
css:
html:
javascript:
完整示例:jQuery渐变幻灯片.zip
css:
<style type="text/css"> #banner,#banner img{position:relative;width:600px;height:290px;} #banner{margin:0 auto;} #banner img{position:absolute;top:0;left:0;filter:Alpha(opacity=100);opacity:1;} </style>
html:
<div id="banner"> <img src="images/demo01.jpg" /> <img src="images/demo02.jpg" /> <img src="images/demo03.jpg" /> </div>
javascript:
<script type="text/javascript"> $(document).ready(function(){ //每隔3秒执行一次图片切换函数 window.setInterval("opChange()",3000); }) function opChange(){ var e_first=$("#banner img:first"); var e_last=$("#banner img:last"); e_first.animate({"filter":"Alpha(opacity=0)","opacity":"0"},function(){ //第一个图片透明度变为0的时候,将它移动到最后 e_first.insertAfter(e_last); //将最后一个图片的透明度恢复 e_last.animate({"filter":"Alpha(opacity=100)","opacity":"1"}); }); } </script>
完整示例:jQuery渐变幻灯片.zip
相关文章推荐
- 七行jquery代码实现图片渐变切换【兼容ie6&IE6+、 Chrome、 Firefox】
- jquery实现图片渐变切换兼容ie6/Chrome/Firefox
- jquery实现图片渐变切换兼容ie6/Chrome/Firefox
- 七行jquery代码实现图片渐变切换【兼容ie6+、 Chrome、 Firefox】
- jquery实现两个图片渐变切换效果的方法
- jquery实现两个图片渐变切换效果的方法
- HTML5与jQuery实现渐变绚丽网页图片效果
- jQuery.nivo.slider.js 幻灯片图片切换
- jQuery图片翻牌品牌翻转切换效果
- JQuery图片切换 Win8 Metro风格Banner
- jQuery学习:简单的渐入渐出图片切换
- 18款 非常实用 jquery幻灯片图片切换
- jQuery图片切换效果
- jQuery - 广告图片轮播切换
- HTML中动态图片切换JQuery实现
- Jquery仿支付宝首页Banner图片切换效果
- 基于jquery的图片的切换(以数字的形式)
- 30款jQuery常用网页焦点图banner图片切换
- Jquery自动切换图片
- Windows Phone 实用开发技巧(30):Pivot切换时同时渐变背景图片