您的位置: 首页 > 源码资料
兼容性好的图片无线滚动代码,同一页面多个滚动形式
源码资料 时间:2013-05-18 作者/发布人:科杰在线 点击:4113
<!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>
<body>
第一个
<div id="demo" style="width:216px;overflow:hidden; align: center; margin-left:6px;">
<table width="216px" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td id="demo1">
<table>
<tr>
<td><a href="#" class="hui3" target="_blank"><img name="in_r32_c12" src="科杰在线pc354.com.jpg" width="216" height="141" class="proborder" alt="" border="0"/></a></td><td> </td>
<td><a href="#" class="hui3" target="_blank"><img name="in_r32_c12" src="科杰在线pc354.com.jpg" width="216" height="141" class="proborder" alt="" border="0"/></a></td><td> </td>
</tr>
</table>
</td>
<td id="demo2"></td>
</tr>
</table>
</div>
<script>
var speed=30 //定义速度,实指下面滚动函数的执行间隔,值越小滚动越快
var demo=document.getElementById("demo")
var demo1=document.getElementById("demo1")
var demo2=document.getElementById("demo2")
demo2.innerHTML=demo1.innerHTML //将demo1中的内容复制到demo2
function Marquee(){ //开始定义滚动函数
//向右滚动
/*if(demo1.offsetLeft-demo.scrollLeft>=0)
demo.scrollLeft+=demo1.offsetWidth //如果滑动块的位置大于demo2的宽度,滑动块退回一个demo2的宽度
else{
demo.scrollLeft-- //否则,滑动块向右滚动(图片向左滚)
}*/
//向左滚动
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth //如果滑动块的位置大于demo2的宽度,滑动块退回一个demo2的宽度
else{
demo.scrollLeft++ //否则,滑动块向右滚动(图片向左滚)
}
}//滚动函数定义完
var MyMar=setInterval(Marquee,speed) //设置定时器,使滚动函数每30毫秒运行一次
demo.onmouseover=function() {clearInterval(MyMar)}//鼠标经过时,清除定时器,停止执行滚动函数,弹出信息;
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}// 鼠标离开后,继续滚动
</script>
第二个
<div id="demox" style="width:216px;overflow:hidden; align: center; margin-left:6px;">
<table width="216px" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td id="demo1x">
<table>
<tr>
<td><a href="#" class="hui3" target="_blank"><img name="in_r32_c12" src="科杰在线pc354.com.jpg" width="216" height="141" class="proborder" alt="" border="0"/></a></td><td> </td>
<td><a href="#" class="hui3" target="_blank"><img name="in_r32_c12" src="科杰在线pc354.com.jpg" width="216" height="141" class="proborder" alt="" border="0"/></a></td><td> </td>
</tr>
</table>
</td>
<td id="demo2x"></td>
</tr>
</table>
</div>
<script>
var speed=30 //定义速度,实指下面滚动函数的执行间隔,值越小滚动越快
var demox=document.getElementById("demox")
var demo1x=document.getElementById("demo1x")
var demo2x=document.getElementById("demo2x")
demo2x.innerHTML=demo1x.innerHTML //将demo1中的内容复制到demo2
function Marquee(){ //开始定义滚动函数
//向右滚动
/*if(demo1x.offsetLeft-demox.scrollLeft>=0)
demox.scrollLeft+=demo1x.offsetWidth //如果滑动块的位置大于demo2的宽度,滑动块退回一个demo2的宽度
else{
demox.scrollLeft-- //否则,滑动块向右滚动(图片向左滚)
}*/
//向左滚动
if(demo2x.offsetWidth-demox.scrollLeft<=0)
demox.scrollLeft-=demo1x.offsetWidth //如果滑动块的位置大于demo2的宽度,滑动块退回一个demo2的宽度
else{
demox.scrollLeft++ //否则,滑动块向右滚动(图片向左滚)
}
}//滚动函数定义完
var MyMarx=setInterval(Marqueex,speed) //设置定时器,使滚动函数每30毫秒运行一次
demox.onmouseover=function() {clearInterval(MyMarx)}//鼠标经过时,清除定时器,停止执行滚动函数,弹出信息;
demox.onmouseout=function() {MyMarx=setInterval(Marqueex,speed)}// 鼠标离开后,继续滚动
</script>
第三个
<div id="demoy" style="width:216px;overflow:hidden; align: center; margin-left:6px;">
<table width="216px" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td id="demo1y">
<table>
<tr>
<td><a href="#" class="hui3" target="_blank"><img name="in_r32_c12" src="科杰在线pc354.com.jpg" width="216" height="141" class="proborder" alt="" border="0"/></a></td><td> </td>
<td><a href="#" class="hui3" target="_blank"><img name="in_r32_c12" src="科杰在线pc354.com.jpg" width="216" height="141" class="proborder" alt="" border="0"/></a></td><td> </td>
</tr>
</table>
</td>
<td id="demo2y"></td>
</tr>
</table>
</div>
<script>
var speed=30 //定义速度,实指下面滚动函数的执行间隔,值越小滚动越快
var demoy=document.getElementById("demoy")
var demo1y=document.getElementById("demo1y")
var demo2y=document.getElementById("demo2y")
demo2y.innerHTML=demo1y.innerHTML //将demo1中的内容复制到demo2
function Marquee(){ //开始定义滚动函数
//向右滚动
/*if(demo1y.offsetLeft-demoy.scrollLeft>=0)
demoy.scrollLeft+=demo1y.offsetWidth //如果滑动块的位置大于demo2的宽度,滑动块退回一个demo2的宽度
else{
demoy.scrollLeft-- //否则,滑动块向右滚动(图片向左滚)
}*/
//向左滚动
if(demo2y.offsetWidth-demoy.scrollLeft<=0)
demoy.scrollLeft-=demo1y.offsetWidth //如果滑动块的位置大于demo2的宽度,滑动块退回一个demo2的宽度
else{
demoy.scrollLeft++ //否则,滑动块向右滚动(图片向左滚)
}
}//滚动函数定义完
var MyMary=setInterval(Marqueey,speed) //设置定时器,使滚动函数每30毫秒运行一次
demoy.onmouseover=function() {clearInterval(MyMary)}//鼠标经过时,清除定时器,停止执行滚动函数,弹出信息;
demoy.onmouseout=function() {MyMary=setInterval(Marqueey,speed)}// 鼠标离开后,继续滚动
</script>
</body>
</html>
=============
HTML
<div id=demo1>
<img src=”gfjs.gif”><br><img src=”bxtt.gif”><br><img src=”bzjd.gif”><br>
<img src=”gfjs.gif”><br><img src=”bxtt.gif”><br><img src=”bzjd.gif”><br>
<img src=”gfjs.gif”><br><img src=”bxtt.gif”><br><img src=”bzjd.gif”><br>
<img src=”gfjs.gif”><br><img src=”bxtt.gif”><br><img src=”bzjd.gif”><br>
<img src=”gfjs.gif”><br><img src=”bxtt.gif”><br><img src=”bzjd.gif”><br>
<img src=”gfjs.gif”><br><img src=”bxtt.gif”><br><img src=”bzjd.gif”><br>
<img src=”gfjs.gif”><br><img src=”bxtt.gif”><br><img src=”bzjd.gif”><br>
<img src=”gfjs.gif”><br><img src=”bxtt.gif”><br><img src=”bzjd.gif”><br>
<img src=”gfjs.gif”><br><img src=”bxtt.gif”><br><img src=”bzjd.gif”><br>
<img src=”gfjs.gif”><br><img src=”bxtt.gif”><br><img src=”bzjd.gif”><br>
<img src=”gfjs.gif”><br><img src=”bxtt.gif”><br><img src=”bzjd.gif”><br>
</div>
<div id=demo2></div>
</div>
向上：程序代码
var speed=30
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>
向下：程序代码
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop–
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
向左：程序代码
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
向右：程序代码
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft–
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
