JQ大图渐变特效

来源：互联网发布：阿里云是iaas还是saas 编辑：程序博客网时间：2024/05/23 23:53

大图渐变特效

一般用于无需控制前后图片显示的页面，通过计时器自执行触发函数内对应图片的淡入淡出渐变的效果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>大图渐变特效</title><link rel="stylesheet" href="css/reset.css"><script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><style>.wrap {position: relative;width: 850px;height: 400px;margin: 50px auto;border: 1px solid #cc8;}.wrap img {position: absolute;width: 850px;height: 400px;}</style></head><body><div class="wrap" id="box"><img src="http://img.blog.csdn.net/20170301181323161?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="图片"><img src="http://img.blog.csdn.net/20170301181349005?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="图片"><img src="http://img.blog.csdn.net/20170301181407492?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="图片"></div><script>// 1.先实现逐一图片进行淡出和淡入效果// 2.因为图片数量不确定需要判断让对应的图片淡入同时另外其他图片淡出。因此增加一个计时器。// 当切换到最后一张图片的时候重新归零显示图片var circleImages = 0;function numImages(){circleImages++;if (circleImages == $('#box img').length) {circleImages = 0;};$('#box img').eq(circleImages).fadeIn(1000).siblings().fadeOut(1000);}setInterval(numImages, 2000);</script></body></html>

0 0