8周宝宝发音视频教程:怎么做成不间断的跑马灯效果??/

来源:百度文库 编辑:中科新闻网 时间:2024/05/10 12:29:03
我的意思是说,从头跑到尾在接上第一个图片

//定义相关函数

<script language="javascript" type="text/javascript">
function ini(arr,hght,spd,width,height){
document.write('<DIV id=sch onmouseover="try{clearTimeout(timer1);}catch(e){;}" style="OVERFLOW: hidden;width:'+width+';HEIGHT:'+height+'px" onmouseout="timer1=setInterval(\'newsScroll()\','+spd+')">');
document.write('<table id=bb style=" Height: '+height+'px; POSITION: relative; Left:0px;TOP: 0px;"><tr>');
document.write('<td id=sch_0 nowrap> </td>');
document.write('<td id=sch_1 nowrap> </td>');
document.write('</tr></table>');
document.write('</div>');
var str="";
for(var i=0;i<arr.length;i++){
//alert(arr[i][0]);
if(arr[i][2]==''){
str='<img style="margin:3px;" border=0 src="'+arr[i][0]+'" Height="'+hght+'" alt="'+arr[i][1]+'" /> ';
}
else{
str='<a href="'+arr[i][2]+'" target=_blank><img style="margin:3px;" border=0 src="'+arr[i][0]+'" Height="'+hght+'" alt="'+arr[i][1]+'" /></a> ';
}
if(sch_0.innerHTML==' '){
sch_0.innerHTML=str;
}
else{
sch_0.innerHTML=sch_0.innerHTML+str;
}
}
sch_1.innerHTML=sch_0.innerHTML;
timer1=setInterval('newsScroll()',spd);//*/
//alert("sdf")
}
function newsScroll()
{
bb.style.pixelLeft=(bb.style.pixelLeft-1)%(bb.clientWidth/2);
}
</script>

////下面是函数调用
<script language="javascript" type="text/javascript">
var i=0;var Arr=new Array();
//Arr数组格式 图片源文件 alt, 链接地址(为空不生成链接)
Arr[i++]=new Array('Source','Alt','Url');
Arr[i++]=new Array('Source','Alt','Url');
Arr[i++]=new Array('Source','Alt','Url');
Arr[i++]=new Array('Source','Alt','Url');
Arr[i++]=new Array('Source','Alt','Url');

//ini函数说明 参数1 加载的图片源数组
// 参数2 区域高度
// 参数3 延迟,越高速度越慢
// 参数4 显示区域宽度
// 参数5 图片高度
ini(Arr,100,40,340,100);
</script>

制作方法:
1、在<head>中加入代码:
<script language="JavaScript">
imgArr=new Array()
imgArr[0]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo.gif border=0></a>"
imgArr[1]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo_1.gif border=0></a>"
imgArr[2]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo/flashfox.gif border=0></a>"
imgArr[3]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo/blueieda.gif border=0></a>"
imgArr[4]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo/flashempire.gif border=0></a>"
imgArr[5]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo/5dmedia.gif border=0></a>"
imgArr[6]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo/windstudio.gif border=0></a>"
imgArr[7]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo/sucaiw.gif border=0></a>"
imgArr[8]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo/htmlcn.gif border=0></a>"
imgArr[9]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo/flasherclub.gif border=0></a>"
imgArr[10]="<a href=Javascript:; onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=/images/logo/fwcn.gif border=0></a>"
var moveStep=4 //步长,单位:pixel
var moveRelax=100 //移动时间间隔,单位:ms

ns4=(document.layers)?true:false

var displayImgAmount=5 //视区窗口可显示个数
var divWidth=88 //每块图片占位宽
var divHeight=31 //每块图片占位高

var startDnum=0
var nextDnum=startDnum+displayImgAmount
var timeID
var outHover=false

var startDivClipLeft
var nextDivClipRight

function initDivPlace(){
if (ns4){
for (i=0;i<displayImgAmount;i++){
eval("document.divOuter.document.divAds"+i+".left="+divWidth*i)
}
for (i=displayImgAmount;i<imgArr.length;i++){
eval("document.divOuter.document.divAds"+i+".left="+divWidth*displayImgAmount)
}
}else{
for (i=0;i<displayImgAmount;i++){
eval("document.all.divAds"+i+".style.left="+divWidth*i)
}
for (i=displayImgAmount;i<imgArr.length;i++){
eval("document.all.divAds"+i+".style.left="+divWidth*displayImgAmount)
}
}
}

function mvStart(){
timeID=setTimeout(moveLeftDiv,moveRelax)
}

function mvStop(){
clearTimeout(timeID)
}

function moveLeftDiv(){
if (ns4){
for (i=0;i<=displayImgAmount;i++){
eval("document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left=document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left-moveStep")
}

startDivClipLeft=parseInt(eval("document.divOuter.document.divAds"+startDnum+".clip.left"))
nextDivClipRight=parseInt(eval("document.divOuter.document.divAds"+nextDnum+".clip.right"))

if (startDivClipLeft+moveStep>divWidth){
eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+divWidth)

eval("document.divOuter.document.divAds"+startDnum+".left="+divWidth*displayImgAmount)
eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".left=document.divOuter.document.divAds"+nextDnum+".left+"+divWidth)
eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".clip.left=0")

startDnum=(++startDnum)%imgArr.length
nextDnum=(startDnum+displayImgAmount)%imgArr.length

startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
}else{
eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0")
startDivClipLeft+=moveStep
nextDivClipRight+=moveStep
}
eval("document.divOuter.document.divAds"+startDnum+".clip.left="+startDivClipLeft)
eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+nextDivClipRight)
}else{
for (i=0;i<=displayImgAmount;i++){
eval("document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.left=document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.pixelLeft-moveStep")
}

startDivClipLeft=parseInt(eval("document.all.divAds"+startDnum+".currentStyle.clipLeft"))
nextDivClipRight=parseInt(eval("document.all.divAds"+nextDnum+".currentStyle.clipRight"))

if (startDivClipLeft+moveStep>divWidth){
eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+divWidth+","+divHeight+",0"+")'")

eval("document.all.divAds"+startDnum+".style.left="+divWidth*displayImgAmount)
eval("document.all.divAds"+parseInt((nextDnum+1)%imgArr.length)+".style.left=document.all.divAds"+nextDnum+".style.pixelLeft+"+divWidth)

startDnum=(++startDnum)%imgArr.length
nextDnum=(startDnum+displayImgAmount)%imgArr.length

startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
}else{
startDivClipLeft+=moveStep
nextDivClipRight+=moveStep
}
eval("document.all.divAds"+startDnum+".style.clip='rect(0,"+divWidth+","+divHeight+","+startDivClipLeft+")'")
eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+nextDivClipRight+","+divHeight+",0)'")
}

if (outHover){
mvStop()
}else{
mvStart()
}

}

function writeDivs(){
if (ns4){
document.write("<ilayer name=divOuter width=750 height="+divHeight+">")

for (i=0;i<imgArr.length;i++){
document.write("<layer name=divAds"+i+">")
document.write(imgArr[i]+" ")
document.write("</layer>")
}
document.write("</ilayer>")
document.close()
for (i=displayImgAmount;i<imgArr.length;i++){
eval("document.divOuter.document.divAds"+i+".clip.right=0")
}
}else{
document.write("<div id=divOuter style='position:relative' width=750 height="+divHeight+">")

for (i=0;i<imgArr.length;i++){
document.write("<div id=divAds"+i+" style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'>")
document.write(imgArr[i]+" ")
document.write("</div>")
}
document.write("</div>")
for (i=displayImgAmount;i<imgArr.length;i++){
eval("document.all.divAds"+i+".style.clip='rect(0,0,"+divHeight+",0)'")
}
}
}
</script>
请按照代码中文文字介绍修改相应设置。

2、在<body>中加载: onload=javascript:mvStart()
3、在需要出现滚动效果处加入代码:<SCRIPT language=JavaScript>writeDivs();initDivPlace();</SCRIPT>

制作完成,请参看效果!

经测试楼上的完全合格我给满分,呵呵,就是代码长了点