js图片文字滚动代码
js图片文字滚动代码，本文章提供几款文字滚动的实例代码，大概原理是用js的时间来搞滑动效果哦。
<script >
var imgc = 1;//图片序列开始
var imgm = 5;//图片序列结束
var flag = 1;//标记鼠标移动
var tm;//定时器
//自动循环播放图片
function cgimg(){
if(flag==0)return;
var mimg = document.getelementbyid("mimg");
mimg.src = ""+imgc+".jpg";
imgc++;
if(imgc>imgm)imgc=1;
tm = window.settimeout("cgimg()",1000);
}
//鼠标移动到图片上
function imgstop(){
flag = 0;
window.cleartimeout(tm);
}
//鼠标移动到图片外
function imgstart(){
flag = 1;
tm = window.settimeout("cgimg()",1000);
}
//单击按钮时
function moimg(imgurl){
window.cleartimeout(tm);
var mimg = document.getelementbyid("mimg");
mimg.src = imgurl;
}
//初始化按钮
function initbtn(){
var mimg = document.getelementbyid("imgdiv");
var divtop = parseint(mimg.style.top);
var divhei = parseint(mimg.style.height);
var mdivtop= divtop+divhei-30;
var divleft = parseint(mimg.style.left);
var divwid = parseint(mimg.style.width);
var mdivleft = divleft+divwid-(imgm-imgc)*25;var btndiv = document.getelementbyid("btndiv");
for(i=imgc,j=1;i<=imgm;i++,j++){btndiv.innerhtml = btndiv.innerhtml + " <a style="cursor:hand" onmouseo教程ver="moimg('"+i+".jpg')" onmouseout="imgstart()">"+j+"</a> | ";
}}
function showdiv(){
var mydiv = document.getelementbyid("mydiv");
mydiv.style.height=200;
}
function dispdiv(){
var mydiv = document.getelementbyid("mydiv");
mydiv.style.height=30;}
function initdiv(){
var mydiv = document.getelementbyid("mydiv");
var winwidth = window.document.body.clientwidth;
var winheight = window.document.body.clientheight;
var dheight = parseint(mydiv.style.height);
var dwidth = parseint(mydiv.style.width);
mydiv.style.top = winheight - dheight;
mydiv.style.left = winwidth - dwidth;removediv();
}
function removediv(){
var mydiv = document.getelementbyid("mydiv");
var sheight = window.document.body.scrolltop;
var winheight = window.document.body.clientheight;
var swidth = window.document.body.scrollleft;
var winwidth = window.document.body.clientwidth;var divh = sheight+winheight-parseint(mydiv.style.height);
mydiv.style.top = divh;
var divw = swidth+winwidth-parseint(mydiv.style.width);
mydiv.style.left = divw;window.settimeout("removediv()",20);
}</script>
实例代码二
向上滚动：
<div id="demo" style="overflow:hidden;height:100px;width:210px; border:1px solid blue;">
<div id="demo1">
<ul style="margin:0px; padding:0px;">
<li>看这个向上滚动的代码</li>
<li>看这个向上滚动的代码</li>
<li>看这个向上滚动的代码</li>
<li>看这个向上滚动的代码</li>
<li>看这个向上滚动的代码</li>
<li>看这个向上滚动的代码</li>
<li>看这个向上滚动的代码</li>
<li>看这个向上滚动的代码</li>
</ul>
</div>
<div id="demo2"></div>
</div>
<script style="text/网页特效">
var speed=40;//数值越大，速度越慢
var demo2=document.getelementbyid("demo2");
var demo1=document.getelementbyid("demo1");
var demo=document.getelementbyid("demo");
demo2.innerhtml=demo1.innerhtml;
demo.scrolltop=demo.scrollheight;
function marqueeup(){
if(demo2.offsettop-demo.scrolltop<=0)
demo.scrolltop-=demo2.offsetheight;
else{
demo.scrolltop++;
}
}
var mymar=setinterval(marqueeup,speed);
demo.onmouseover=function() {clearinterval(mymar);}
demo.onmouseout=function() {mymar=setinterval(marqueeup,speed);}
</script>
b、向下滚动：
<div id="demo" style="overflow:hidden;height:100px;width:210px; border:1px solid blue;">
<div id="demo1">
<ul style="margin:0px; padding:0px;">
<li>看这个向下滚动的代码</li>
<li>看这个向下滚动的代码</li>
<li>看这个向下滚动的代码</li>
<li>看这个向下滚动的代码</li>
<li>看这个向下滚动的代码</li>
<li>看这个向下滚动的代码</li>
<li>看这个向下滚动的代码</li>
<li>看这个向下滚动的代码</li>
</ul>
</div>
<div id="demo2"></div>
</div>
<script style="text/javascript">
var speed=40;//数值越大，速度越慢
var demo2=document.getelementbyid("demo2");
var demo1=document.getelementbyid("demo1");
var demo=document.getelementbyid("demo");
demo2.innerhtml=demo1.innerhtml;
demo.scrolltop=demo.scrollheight;
function marqueedown(){
if(demo1.offsettop-demo.scrolltop>=0)
demo.scrolltop+=demo2.offsetheight
else{
demo.scrolltop--
}
}
var mymar=setinterval(marqueedown,speed);
demo.onmouseover=function() {clearinterval(mymar);}
demo.onmouseout=function() {mymar=setinterval(marqueedown,speed);}
</script>
c、向右滚动：<div id="demo" style="overflow:hidden;height:90px;width:210px; border:1px solid blue;">
<div id="demo1">
<table cellspacing="0">
<tr>
<td><img src="1207014080942.jpg" height="84" width="64"></td><td><img src="1207014080942.jpg" height="84" width="64"></td><td><img src="1207014080942.jpg" height="84" width="64"></td><td><img src="1207014080942.jpg" height="84" width="64"></td><td><img src="1207014080942.jpg" height="84" width="64"></td><td><img src="1207014080942.jpg" height="84" width="64"></td><td><img src="1207014080942.jpg" height="84" width="64"></td>
</tr>
</table>
</div>
<div id="demo2"></div>
</div>
<script style="text/javascript">
var speed=40;//数值越大，速度越慢
var demo2=document.getelementbyid("demo2");
var demo1=document.getelementbyid("demo1");
var demo=document.getelementbyid("demo");
demo.scrollleft=demo.scrollwidth
function marqueeright(){
if(demo.scrollleft<=0)
demo.scrollleft+=demo2.offsetwidth
else{
demo.scrollleft--
}
}
var mymar=setinterval(marqueeright,speed);
demo.onmouseover=function() {clearinterval(mymar);}
demo.onmouseout=function() {mymar=setinterval(marqueeright,speed);}
</script>
d、向左滚动：<div id="demo" style="overflow:hidden;height:301px;width:312px; border:1px solid blue;">
<div id="demo1">
<table width="312" height="301" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="103" height="146"><img src="images/cuxiao_08.jpg" width="103" height="146" alt=""></td>
<td width="105"><img src="images/cuxiao_09.jpg" width="105" height="146" alt=""></td>
<td width="104"><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>
<td width="104"><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>
<td width="104"><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>
<td width="104"><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>
</tr>
<tr>
<td height="155"><img src="images/cuxiao_14.jpg" width="103" height="155" alt=""></td>
<td><img src="images/cuxiao_15.jpg" width="105" height="155" alt=""></td>
<td><img src="images/cuxiao_16.jpg" width="104" height="155" alt=""></td>
<td><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>
<td><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>
<td><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>
</tr>
</table>
</div>
<div id="demo2"></div>
</div>
<script style="text/javascript">
var speed=40;//数值越大，速度越慢
var demo2=document.getelementbyid("demo2");
var demo1=document.getelementbyid("demo1");
var demo=document.getelementbyid("demo");
function marqueeleft(){
if(demo2.offsetwidth-demo.scrollleft<=0)
demo.scrollleft-=demo1.offsetwidth
else{
demo.scrollleft++
}
}
var mymar=setinterval(marqueeleft,speed);
demo.onmouseover=function() {clearinterval(mymar);}
demo.onmouseout=function() {mymar=setinterval(marqueeleft,speed);}
</script>
