图片的淡入淡出成效-JavaSript-爱易网页

图片的淡入淡出成效

日期：2014-05-16　浏览次数：20327 次

图片的淡入淡出效果

这里面总共放了5张图片想要的效果：1、图片淡入淡出，慢慢的消失，慢慢的显现
2、图片每隔4秒或者一段时间图片就交替一次
3、通过点击上面的数字标点，交替图片
求教该如何写呢。。。。。谢谢大家。。。

javascript web

------解决方案--------------------
用jquery吧，那样是好方便的，http://www.ablanxue.com/prone_3054_1.html
jquery淡入淡出的全屏广告幻灯片切换特效代码

------解决方案--------------------
两个重叠的层，div1在下，div2在上。
通过改变div2的透明度实现淡入淡出效果。
IE上做的，别的浏览器可能不兼容



 <HEAD>

  <TITLE> 淡入淡出 </TITLE>

  <style>

	div { text-align:center; font-size:12px; font-weight:bold; font-family:Arial}

	div .normal {float:left; width:20px; height:15px; cursor:pointer; filter:alpha(opacity:50); margin-left:1px; background:white; color:#333;}

	div .active  {float:left; width:20px; height:15px; cursor:pointer; filter:alpha(opacity:50); margin-left:1px; background:red; color:white; }

  </style>

 </HEAD>



 <BODY>

  <div style="width:475px; height:60px; border:2px solid gray">

	<div id="div1" style="width:475px; height:60px;"></div>

	<div id="div2" style="width:475px; height:60px; float:left; margin-top:-60px; opacity:100"></div>

	<div id="div_idx" style="height:15px; margin-top: -15px">

		<div class="active" onclick="clk(this)">1</div>

		<div class="normal" onclick="clk(this)">2</div>

		<div class="normal" onclick="clk(this)">3</div>

		<div class="normal" onclick="clk(this)">4</div>

		<div class="normal" onclick="clk(this)">5</div>

	</div>

  </div>



	//两个重叠的层，div1在下，div2在上。通过改变div2的透明度实现淡入淡出效果。



	var div1 = document.getElementById("div1");

	var div2 = document.getElementById("div2");

	var currIdx=1, timer, timer2;

	//图片数组

	var arr = ["http://info-database.csdn.net/Upload/2013-03-05/aliyun3-475-60-0305.jpg",

				"http://info-database.csdn.net/Upload/2013-03-15/5th-yunjisuan-475-60-0315.jpg",

				"http://info-database.csdn.net/Upload/2013-03-13/unity-560-95-0311.jpg",

				"http://info-database.csdn.net/Upload/2013-03-21/ibm-platform-760-90-0321.jpg",

				"http://info-database.csdn.net/Upload/2013-03-19/go-760-90-0319.jpg"

				];

	//装入第一张图片

	div2.style.background = "url('"+ arr[0] +"') no-repeat";

	//每5秒换一张图片

	timer = window.setInterval("fun()", 5000);

	//换图片

	function fun(){

		//改背景图片

		if (currIdx == arr.length) currIdx = 0;

		if ( div2.style.opacity == 0) div2.style.background = "url('"+ arr[currIdx] +"') no-repeat";

		else div1.style.back

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

图片的淡入淡出成效

相关资料更多>

推荐阅读更多>