求一款能兼容IE和火狐的滤镜图片切换效果DEMO，谢谢了。

cf370697816 2011-10-26 02:33:49

如题，希望能有高手出现。

...全文

311 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

jayrao5566 2011-10-29

打赏
举报

[Quote=引用 4 楼 hch126163 的回复:]

懒人图库有很多，去找吧

http://www.lanrentuku.com/js/jiaodiantu.html

http://d.lanrentuku.com/down/js/jiaodiantu-392/
[/Quote]
这里面还真多.

hch126163 2011-10-28

打赏
举报

懒人图库有很多，去找吧

http://www.lanrentuku.com/js/jiaodiantu.html

http://d.lanrentuku.com/down/js/jiaodiantu-392/

cf370697816 2011-10-27

打赏
举报



<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>大幅图片广告代码演示</title>

<style type="text/css">

img {border:0px;}

.col1

{

background-image:url(images/whitebg.jpg);

background-repeat:no-repeat;

  float:right; 

  width:12px; 

  height:12px;

  margin:0 5px;

  cursor:pointer;

}

.col2

{

  background-image:url(images/yellowbg.jpg);

  background-repeat:no-repeat;

  float:right; 

  width:12px;

  height:12px;

  margin:0 5px;

  cursor:pointer;

  

}

</style>

<script>

    var img1 = document.createElement("img");

    var img2 = document.createElement("img");

    var img3 = document.createElement("img");

    img1.src = "images/1.jpg";

    img2.src = "images/2.jpg";

    img3.src = "images/3.jpg";

</script>

<script language="javascript">

var index=1;

function auto()

{

 tip(index);

 index=index+1;

 if(index>3)

  index=1;

}

function tip(par)

{

 

  var object="oDIV"+par;

  

  document.getElementById("oDIV1").style.display="none";

  document.getElementById("oDIV2").style.display="none";

  document.getElementById("oDIV3").style.display="none";

/*  document.getElementById("oDIV1").style.opacity=0;

  document.getElementById("oDIV2").style.opacity=0;

  document.getElementById("oDIV3").style.opacity=0;

  document.getElementById("test").style.opacity=0;*/

  

   var count = 0;

    var sint = setInterval(function(){

        if(count >= 100){clearInterval(sint);}

        document.getElementById(object).style.filter = 'alpha(opacity='+count+')';

		

        document.getElementById(object).style.opacity = count / 100;

		document.getElementById("test").style.filter = 'alpha(opacity='+count+')';

        document.getElementById("test").style.opacity = count / 100;

        count +=10;

        

    },100)

  document.getElementById(object).style.display="";

  if(object=="oDIV1")

  {

    document.getElementById('test').style.backgroundImage = "url(images/1.jpg)";

    document.getElementById('test').style.backgroundPosition = "top";

  }

   if(object=="oDIV2")

  {

    document.getElementById('test').style.backgroundImage = "url(images/2.jpg)";

    document.getElementById('test').style.backgroundPosition = "top";

  }

   if(object=="oDIV3")

  {

    document.getElementById('test').style.backgroundImage = "url(images/3.jpg)";

    document.getElementById('test').style.backgroundPosition = "top";

  }

  

  

  document.getElementById("col1").className="col1"; 

  document.getElementById("col2").className="col1"; 

  document.getElementById("col3").className="col1"; 

  document.getElementById("col"+par).className="col2"; 

}

setInterval(auto,2000);

</script>

</head>

<body>

<div id="test" style="width:100%; height:350px; border:1px solid red;"> 

    <center>

<div style="width:778px; margin:0 auto;"><table  border="0" align="center" cellpadding="0" cellspacing="0">

      <tr>

        <td>  

            

                <a href="#" target="_blank"><img class=pic id=oDIV1 src="images/4.jpg" width=788 height=330 ></a>

                <a href="#" target="_blank"><img class=pic id=oDIV2 src="images/5.jpg" width=788 height=330 style="DISPLAY: none;"></a>

                <a href="#" target="_blank"><img class=pic id=oDIV3 src="images/6.jpg" width=788 height=330 style="DISPLAY: none;"></a>

            

			<div style="position:absolute; float:right; left:45%; top:270px;">

			 <div id="col1" onClick="tip(1)"></div>

			 <div id="col2" onClick="tip(2)"></div>

             <div id="col3" onClick="tip(3)"></div>

			</div> 

        </td>

      </tr>

    </table>

    

    </div></center>

	

</div>

</body>

</html>

<script>

  window.onload=function (){

   document.getElementById('test').style.backgroundImage = "url(images/1.jpg)";

    document.getElementById('test').style.backgroundPosition = "top";

  }</script>

北北快来呀，帮个忙呀，滤镜效果是有了，不过切图片的时候闪动丫，帮我改改吧，，哪里出问题啦。。

cf370697816 2011-10-26

打赏
举报

[Quote=引用 1 楼 mubeibei 的回复:]
JScript code

var count = 0;
var sint = setInterval(function(){
if(count >= 100){clearInterval(sint);}
document.getElementById('text').style.filter = 'alpha(opacity='+count+')……
[/Quote]
那怎么做图片轮换呢？

MuBeiBei 2011-10-26

打赏
举报

var count = 0;

	var sint = setInterval(function(){

		if(count >= 100){clearInterval(sint);}

		document.getElementById('text').style.filter = 'alpha(opacity='+count+')';

		document.getElementById('text').style.opacity = count / 100;

		count += 10;

		

	},100)

页面上写个<div id="text">11111111111111</div>

只要id为text就行了