求个图片循环渐变滚动,带停滞时间的代码!QQ619127373
4个回答
展开全部
试试这个图片循环渐变滚动效果
有12345数字一起切换
停滞时间可以自己设置
里面有教程和源码
参考资料： http://www.blueidea.com/common/shoutbox/redir.asp?5=s&id=10895
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给你一个详细的思路：
1.将图片调整好大小后选择，按下F8键转换为按钮。
2.双击进入这个按钮，然后在第二帧，经过一帧，如果你希望鼠标经过，图片放大的话，就可以单独在经过帧里调整图片大小，调整大一些。点击区域随意。
3.将其他图片也调整好大小，重复步骤1，2的操作，他们都是第二帧经过区域调整大一些。
4.做这个效果，必须使用代码，但是做动画最基本要掌握的所以不难，就是每一个按钮都要这个命令：
on (rollOver) {
stop();
}
on (rollOut) {
play();
}
意思是：当鼠标滑过按钮时，停止动画，当鼠标离开了按钮，动画播放。
上面的命令，给每个图片转换的按钮都加一个。
5.最关键的就是这个动画了，所有图片重复步骤4的操作，在动作面板中添加相同的命令，然后将图片转换的按钮全选，“CTRL+G”组合一下。
6.第1帧到第30帧开始制作动画的画面移动，中间补间动画就完成了动画效果了。
1.将图片调整好大小后选择，按下F8键转换为按钮。
2.双击进入这个按钮，然后在第二帧，经过一帧，如果你希望鼠标经过，图片放大的话，就可以单独在经过帧里调整图片大小，调整大一些。点击区域随意。
3.将其他图片也调整好大小，重复步骤1，2的操作，他们都是第二帧经过区域调整大一些。
4.做这个效果，必须使用代码，但是做动画最基本要掌握的所以不难，就是每一个按钮都要这个命令：
on (rollOver) {
stop();
}
on (rollOut) {
play();
}
意思是：当鼠标滑过按钮时，停止动画，当鼠标离开了按钮，动画播放。
上面的命令，给每个图片转换的按钮都加一个。
5.最关键的就是这个动画了，所有图片重复步骤4的操作，在动作面板中添加相同的命令，然后将图片转换的按钮全选，“CTRL+G”组合一下。
6.第1帧到第30帧开始制作动画的画面移动，中间补间动画就完成了动画效果了。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用JS吧，方便多了，给个例子，自己再修改一下:"http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无缝滚动</title>
<style type="text/css">
img{
border:0;
height:100px; width:150px;
}
td img{
margin:0 10px;
}
</style>
</head>
<body>
<!-- 纵向向无缝滚动-->
<div id="demo" style="overflow:hidden;height:350px;width:200px">
<div id="demo1">
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_01.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_02.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_03.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_04.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_05.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_06.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_07.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_08.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_10.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_11.jpg"></a><p>
</div>
<div id="demo2">
</div>
</div>
<script>
var speed=40;
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
var demo=document.getElementById("demo");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight;
else{
demo.scrollTop++;
}
}
var MyMar=setInterval(Marquee,speed);
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无缝滚动</title>
<style type="text/css">
img{
border:0;
height:100px; width:150px;
}
td img{
margin:0 10px;
}
</style>
</head>
<body>
<!-- 纵向向无缝滚动-->
<div id="demo" style="overflow:hidden;height:350px;width:200px">
<div id="demo1">
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_01.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_02.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_03.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_04.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_05.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_06.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_07.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_08.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_10.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_11.jpg"></a><p>
</div>
<div id="demo2">
</div>
</div>
<script>
var speed=40;
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
var demo=document.getElementById("demo");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight;
else{
demo.scrollTop++;
}
}
var MyMar=setInterval(Marquee,speed);
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<!--<script language="javascript">
var pic=new Array();
var num=0;
pic[num++]="song1.jpg";
pic[num++]="song2.jpg";
pic[num++]="song3.jpg";
pic[num++]="song4.jpg";
var a=0;
var pic_src=new Array();
for(i=0;i<pic.length;i++)
{pic_src[i]=new Image();
pic_src[i].src=pic[i];}
function show_pic(){
if(document.all){
tran=Math.floor(Math.random()*23)+1;
//alert(tran);
document.all.the_pic.style.filter="revealtrans(dulation=2,transition="+tran+")";
document.all.the_pic.filters.revealtrans.Apply();}
a+=1;
if(a>pic.length-1)
{a=0;}
document.all.the_pic.src=pic_src[a].src;
if(document.all){
document.all.the_pic.filters.revealtrans.Play();}
}
function setinter(){
change=setInterval('show_pic()',3000);//此处可以修改时间
}
</script>
<body onLoad="setinter();">
<img src="song1.jpg"> -->
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id=oTransContainer
style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH: 788px; HEIGHT: 150px"><a href=" #" target="_blank"><img class=pic id=oDIV1 src="song1.jpg" width=788 height=150>
<script>var NowFrame = 1;var MaxFrame = 5;var bStart = 0;function fnToggle(){var next = NowFrame + 1;if(next == MaxFrame+1) {NowFrame = MaxFrame;next = 1;}if(bStart == 0){bStart = 1;setTimeout('fnToggle()', 1000);return;}else{oTransContainer.filters[0].Apply();document.images['oDIV'+next].style.display = "";document.images['oDIV'+NowFrame].style.display = "none";oTransContainer.filters[0].Play(duration=2);if(NowFrame == MaxFrame){NowFrame = 1;}else{NowFrame++;}} setTimeout('fnToggle()', 6000);}fnToggle();</script>
</a>
<a href="#" target="_blank"><img class=pic id=oDIV2 src="song1.jpg" width=788 height=150 style="DISPLAY: none;"></a>
<a href="#" target="_blank"><img class=pic id=oDIV3 src="song2.jpg" width=788 height=150 style="DISPLAY: none;"></a>
<a href=" #" target="_blank"><img class=pic id=oDIV4 src="song3.jpg" width=788 height=150 style="DISPLAY: none;"></a>
<a href=" #" target="_blank"><img class=pic id=oDIV5 src="song4.jpg" width=788 height=150 style="DISPLAY: none;"></a>
</div></td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<!--<script language="javascript">
var pic=new Array();
var num=0;
pic[num++]="song1.jpg";
pic[num++]="song2.jpg";
pic[num++]="song3.jpg";
pic[num++]="song4.jpg";
var a=0;
var pic_src=new Array();
for(i=0;i<pic.length;i++)
{pic_src[i]=new Image();
pic_src[i].src=pic[i];}
function show_pic(){
if(document.all){
tran=Math.floor(Math.random()*23)+1;
//alert(tran);
document.all.the_pic.style.filter="revealtrans(dulation=2,transition="+tran+")";
document.all.the_pic.filters.revealtrans.Apply();}
a+=1;
if(a>pic.length-1)
{a=0;}
document.all.the_pic.src=pic_src[a].src;
if(document.all){
document.all.the_pic.filters.revealtrans.Play();}
}
function setinter(){
change=setInterval('show_pic()',3000);//此处可以修改时间
}
</script>
<body onLoad="setinter();">
<img src="song1.jpg"> -->
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id=oTransContainer
style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH: 788px; HEIGHT: 150px"><a href=" #" target="_blank"><img class=pic id=oDIV1 src="song1.jpg" width=788 height=150>
<script>var NowFrame = 1;var MaxFrame = 5;var bStart = 0;function fnToggle(){var next = NowFrame + 1;if(next == MaxFrame+1) {NowFrame = MaxFrame;next = 1;}if(bStart == 0){bStart = 1;setTimeout('fnToggle()', 1000);return;}else{oTransContainer.filters[0].Apply();document.images['oDIV'+next].style.display = "";document.images['oDIV'+NowFrame].style.display = "none";oTransContainer.filters[0].Play(duration=2);if(NowFrame == MaxFrame){NowFrame = 1;}else{NowFrame++;}} setTimeout('fnToggle()', 6000);}fnToggle();</script>
</a>
<a href="#" target="_blank"><img class=pic id=oDIV2 src="song1.jpg" width=788 height=150 style="DISPLAY: none;"></a>
<a href="#" target="_blank"><img class=pic id=oDIV3 src="song2.jpg" width=788 height=150 style="DISPLAY: none;"></a>
<a href=" #" target="_blank"><img class=pic id=oDIV4 src="song3.jpg" width=788 height=150 style="DISPLAY: none;"></a>
<a href=" #" target="_blank"><img class=pic id=oDIV5 src="song4.jpg" width=788 height=150 style="DISPLAY: none;"></a>
</div></td>
</tr>
</table>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
