猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

JS如何控制背景淡入淡出？

JS如何控制背景淡入淡出？


慕娘9325324
浏览 573回答 2
2回答

泛舟湖上清波郎朗

下代码可以实现，不过你要首先下载一个JS插件：Jquery，我用的是jquery-1.9.1.min.js，你下载下来后放到网页同级目录就可以了，如入代码适用于2张或多张图片。1234567891011121314151617181920<div&nbsp;id="imgbox">&nbsp;&nbsp;&nbsp;&nbsp;<img&nbsp;src="11.jpg"&nbsp;/><img&nbsp;src="22.jpg"&nbsp;/></div><script&nbsp;src="jquery-1.9.1.min.js"></script><script>$(document).ready(function(){&nbsp;&nbsp;&nbsp;&nbsp;$("#imgbox&nbsp;img").fadeOut(0).eq(0).fadeIn(0);&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;i&nbsp;=&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;setInterval(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if($("#imgbox&nbsp;img").length&nbsp;>&nbsp;(i+1)){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#imgbox&nbsp;img").eq(i).fadeOut(0).next("img").fadeIn(1000);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i++;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#imgbox&nbsp;img").eq(i).fadeOut(0).siblings("img").eq(0).fadeIn(1000);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i&nbsp;=&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;},2000);});</script>&nbsp;
0

潇潇雨雨

1234567891011121314151617181920212223242526272829303132<html><head>&nbsp;&nbsp;&nbsp;&nbsp;<style>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html,body{width:100%;height:100%;margin:0px&nbsp;auto;padding:0px&nbsp;auto;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.bgdiv{width:100%;height:100%;position:absolute;z-index:-999;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.bgdiv&nbsp;img{width:100%;height:100%;border:0px;}&nbsp;&nbsp;&nbsp;&nbsp;</style>&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;src="jquery-1.9.1.min.js"></script>&nbsp;&nbsp;&nbsp;&nbsp;<script>&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#imgbox&nbsp;img").fadeOut(0).eq(0).fadeIn(0);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;i&nbsp;=&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setInterval(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if($("#imgbox&nbsp;img").length&nbsp;>&nbsp;(i+1)){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#imgbox&nbsp;img").eq(i).fadeOut(0).next("img").fadeIn(1000);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i++;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#imgbox&nbsp;img").eq(i).fadeOut(0).siblings("img").eq(0).fadeIn(1000);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i&nbsp;=&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},2000);&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;</script></head><body>&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="imgbox"&nbsp;class="bgdiv">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img&nbsp;src="11.jpg"&nbsp;/><img&nbsp;src="22.jpg"&nbsp;/>&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;&nbsp;<div>网页其他内21容网页其他3内23网页其他内1容312网页其他内容11</div></body></html>&nbsp;
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JQuery