js图片向左滚动效果
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!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" />
<style type="text/css">
body,div {margin:0; padding:0;}
body {padding:1em 0;}
img {border:0; font-size:0; line-height:0;}
#demoLeft {margin:0 auto;overflow:hidden;width:950px;height:134px;background:#fff;}
#demoLeft .indemo {float:left;width:500%;}
#demo1,#demo2 {float: left;}
#demo1 a,#demo2 a {display:block;float:left;margin-left:10px;}
#demo1 img,#demo2 img{width:178px;height:134px;}
</style>
<title>无缝图片滚动-02</title>
</head>
<body>
<div id="demoLeft">
<div class="indemo">
<div id="demo1">
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>
<a href="#"><img src="images/4.jpg" /></a>
<a href="#"><img src="images/5.jpg" /></a>
<a href="#"><img src="images/6.jpg" /></a>
<a href="#"><img src="images/7.jpg" /></a>
<a href="#"><img src="images/8.jpg" /></a>
<a href="#"><img src="images/9.jpg" /></a>
<a href="#"><img src="images/10.jpg" /></a>
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>
<a href="#"><img src="images/4.jpg" /></a>
<a href="#"><img src="images/5.jpg" /></a>
<a href="#"><img src="images/6.jpg" /></a>
<a href="#"><img src="images/7.jpg" /></a>
<a href="#"><img src="images/8.jpg" /></a>
<a href="#"><img src="images/9.jpg" /></a>
<a href="#"><img src="images/10.jpg" /></a>
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script type="text/javascript">
var speed=1;
var tabLeft=document.getElementById("demoLeft");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee1(){
if(tabLeft.scrollLeft>=tab2.offsetWidth)
tabLeft.scrollLeft-=tab1.offsetWidth;
else{
tabLeft.scrollLeft++;
}
}
var MyMar=setInterval(Marquee1,speed);
tabLeft.onmouseover=function() {clearInterval(MyMar)};
tabLeft.onmouseout=function() {MyMar=setInterval(Marquee1,speed)};
</script>
</body>
</html>
这是我在网上找的代码，图片少的时候(10张左右)还可以，但是图片多了就有问题，或者滚动到最后不滚了，或者demo1与demo2交替的时候太明显，不顺畅，求高手 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body,div {margin:0; padding:0;}
body {padding:1em 0;}
img {border:0; font-size:0; line-height:0;}
#demoLeft {margin:0 auto;overflow:hidden;width:950px;height:134px;background:#fff;}
#demoLeft .indemo {float:left;width:500%;}
#demo1,#demo2 {float: left;}
#demo1 a,#demo2 a {display:block;float:left;margin-left:10px;}
#demo1 img,#demo2 img{width:178px;height:134px;}
</style>
<title>无缝图片滚动-02</title>
</head>
<body>
<div id="demoLeft">
<div class="indemo">
<div id="demo1">
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>
<a href="#"><img src="images/4.jpg" /></a>
<a href="#"><img src="images/5.jpg" /></a>
<a href="#"><img src="images/6.jpg" /></a>
<a href="#"><img src="images/7.jpg" /></a>
<a href="#"><img src="images/8.jpg" /></a>
<a href="#"><img src="images/9.jpg" /></a>
<a href="#"><img src="images/10.jpg" /></a>
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>
<a href="#"><img src="images/4.jpg" /></a>
<a href="#"><img src="images/5.jpg" /></a>
<a href="#"><img src="images/6.jpg" /></a>
<a href="#"><img src="images/7.jpg" /></a>
<a href="#"><img src="images/8.jpg" /></a>
<a href="#"><img src="images/9.jpg" /></a>
<a href="#"><img src="images/10.jpg" /></a>
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script type="text/javascript">
var speed=1;
var tabLeft=document.getElementById("demoLeft");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee1(){
if(tabLeft.scrollLeft>=tab2.offsetWidth)
tabLeft.scrollLeft-=tab1.offsetWidth;
else{
tabLeft.scrollLeft++;
}
}
var MyMar=setInterval(Marquee1,speed);
tabLeft.onmouseover=function() {clearInterval(MyMar)};
tabLeft.onmouseout=function() {MyMar=setInterval(Marquee1,speed)};
</script>
</body>
</html>
这是我在网上找的代码，图片少的时候(10张左右)还可以，但是图片多了就有问题，或者滚动到最后不滚了，或者demo1与demo2交替的时候太明显，不顺畅，求高手 展开
2个回答
展开全部
<!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=utf-8" />
<title>Marquee 替代 -- 无间滚动</title>
<style type="text/css">
<!--
* {padding: 0; margin: 0}
body {margin: 3em; font: 12px Tahoma; background: #EAEAEA; color: #333333; line-height: 20px}
input, textarea {font: 12px Tahoma; color: #666666; padding: 2px; border: solid 1px #DBDBDB}
textarea {padding: 5px; line-height: 20px}
p {margin: 1em 0}
ul {}
li {height: 1%; overflow: hidden; list-style-type: none}
a {color: #666666; text-decoration: none}
a:hover {color: #333333}
.r {float: right}
.l {float: left}
.b {font-weight: bold}
.gray {color: #666666; margin-top: 8px}
.light {color:#FF6600; margin: 0 5px}
.case {display: block; padding: 0 2em 2em 2em; border: solid 1px #EAEAEA; background: #FFFFFF; margin-bottom: 2em; height: 1%; overflow: hidden}
.title {display:block; padding: .5em 2em .5em 1em; margin: 0 -2em 2em -2em; font-weight: bold; color: #000000; background: #FAFAFA; border-bottom: solid 1px #EAEAEA}
.call {display:block;}
.key {display: block; width: 8em; float: left}
.type {display: block; width: 6em; float: left}
.info {padding-left: 2em}
.demo {margin-bottom: 2em}
-->
</style>
<style type="text/css">
<!--
#MyMarqueeX {width: 98%; height: 150px; overflow: hidden; margin: 0 auto 0 auto}
#MyMarqueeX img {width: 185px; height: 125px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px}
#MyMarqueeY {width: 205px; height: 420px; overflow: hidden;}
#MyMarqueeY img {width: 185px; height: 125px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px}
-->
</style>
<script language="javascript" type="text/javascript">
//<!--
// 附带函数
var
// 用ID获取元素
$ = function(element) {
return typeof(element) == 'object' ? element : document.getElementById(element);
},
// 生成随机数
RandStr = function(n, u){
var tmStr = "abcdefghijklmnopqrstuvwxyz0123456789";
var Len = tmStr.length;
var Str = "";
for(i=1;i<n+1;i++){
Str += tmStr.charAt(Math.random()*Len);
}
return (u ? Str.toUpperCase() : Str);
};
//-->
</script>
<script language="javascript" type="text/javascript">
//<!--
/*******************************************
- Marquee 替代 -- 无间滚动
- By Mudoo 2008.8
- http://hi.baidu.com/mt20
********************************************
new Marquee({
obj : 'myMarquee', // 滚动对象（必须）
name : 'MyMQ_1', // 实例名（可选，不指定则随机）
mode : 'x', // 滚动模式（可选，x=水平, y=垂直，默认x）
speed : 10, // 滚动速度（可选，越小速度越快，默认10）
autoStart : true, // 自动开始（可选，默认True）
movePause : true // 鼠标经过是否暂停（可选，默认True）
});
********************************************/
var MyMarquees = new Array();
// 获取检测实例名
function getMyMQName(mName) {
var name = mName==undefined ? RandStr(5) : mName;
var myNames = ','+ MyMarquees.join(',') +',';
while(myNames.indexOf(','+ name +',')!=-1) {
name = RandStr(5);
}
return name;
}
function Marquee(inits) {
var _o = this;
var _i = inits;
if(_i.obj==undefined) return;
_o.mode = _i.mode==undefined ? 'x' : _i.mode; // 滚动模式(x:横向, y:纵向)
_o.mName = getMyMQName(_i.name); // 实例名
_o.mObj = $(_i.obj); // 滚动对象
_o.speed = _i.speed==undefined ? 10 : _i.speed; // 滚动速度
_o.autoStart= _i.autoStart==undefined ? true : _i.autoStart;// 自动开始
_o.movePause= _i.movePause==undefined ? true : _i.movePause;// 鼠标经过是否暂停
_o.mDo = null; // 计时器
_o.pause = false; // 暂停状态
// 无间滚动初始化
_o.init = function() {
if((_o.mObj.scrollWidth<=_o.mObj.offsetWidth && _o.mode=='x') && (_o.mObj.scrollHeight<=_o.mObj.offsetHeight && _o.mode=='y')) return;
MyMarquees.push(_o.mName);
// 克隆滚动内容
_o.mObj.innerHTML = _o.mode=='x' ? (
'<table width="100%" border="0" align="left" cellpadding="0" cellspace="0">'+
' <tr>'+
' <td id="MYMQ_'+ _o.mName +'_1">'+ _o.mObj.innerHTML +'</td>'+
' <td id="MYMQ_'+ _o.mName +'_2">'+ _o.mObj.innerHTML +'</td>'+
' </tr>'+
'</table>'
) : (
'<div id="MYMQ_'+ _o.mName +'_1">'+ _o.mObj.innerHTML +'</div>'+
'<div id="MYMQ_'+ _o.mName +'_2">'+ _o.mObj.innerHTML +'</div>'
);
// 获取对象、高宽
_o.mObj1 = $('MYMQ_'+ _o.mName +'_1');
_o.mObj2 = $('MYMQ_'+ _o.mName +'_2');
_o.mo1Width = _o.mObj1.scrollWidth;
_o.mo1Height = _o.mObj1.scrollHeight;
// 初始滚动
if(_o.autoStart) _o.start();
};
// 开始滚动
_o.start = function() {
_o.mDo = setInterval((_o.mode=='x' ? _o.moveX : _o.moveY), _o.speed);
if(_o.movePause) {
_o.mObj.onmouseover = function() {_o.pause = true;}
_o.mObj.onmouseout = function() {_o.pause = false;}
}
}
// 停止滚动
_o.stop = function() {
clearInterval(_o.mDo)
_o.mObj.onmouseover = function() {}
_o.mObj.onmouseout = function() {}
}
// 水平滚动
_o.moveX = function() {
if(_o.pause) return;
var left = _o.mObj.scrollLeft;
if(left==_o.mo1Width){
_o.mObj.scrollLeft = 0 ;
}else if(left>_o.mo1Width) {
_o.mObj.scrollLeft = left-_o.mo1Width;
}else{
_o.mObj.scrollLeft++;
}
};
// 垂直滚动
_o.moveY = function() {
if(_o.pause) return;
var top = _o.mObj.scrollTop;
if(top==_o.mo1Height){
_o.mObj.scrollTop = 0 ;
}else if(top>_o.mo1Height) {
_o.mObj.scrollTop = top-_o.mo1Height;
}else{
_o.mObj.scrollTop++;
}
};
_o.init();
}
//-->
</script>
</head>
<body>
<div class="case">
<div class="title"><a href="#" class="r">Top</a>Marquee 调用方法</div>
<div class="b">new Marquee({obj, name, mode, speed, autoStart, movePause});</div>
<ul class="info gray">
<li><span class="key">obj：</span><span class="type">Object</span>滚动对象 (*必须)</li>
<li><span class="key">name：</span><span class="type">String</span>实例名 (*可选，默认随机)</li>
<li><span class="key">mode：</span><span class="type">String</span>滚动模式(x=水平, y=垂直) (*可选,默认为x)</li>
<li><span class="key">speed：</span><span class="type">Number</span>滚动速度，越小速度越快 (*可选，默认10)</li>
<li><span class="key">autoStart：</span><span class="type">Boolean</span>自动开始 (*可选，默认True)</li>
<li><span class="key">movePause：</span><span class="type">Boolean</span>鼠标经过是否暂停 (*可选，默认True)</li>
</ul>
</div>
<div class="case">
<div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 横向模式</div>
<div id="MyMarqueeX">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="/uploadfile/200812/2/6D202116643.jpg" alt="魅力泉州" /></td>
<td><img src="/uploadfile/200812/2/F1202116566.jpg" alt="魅力泉州" /></td>
<td><img src="/uploadfile/200812/2/B9202116170.jpg" alt="魅力泉州" /></td>
<td><img src="/uploadfile/200812/2/85202116414.jpg" alt="魅力泉州" /></td>
<td><img src="/uploadfile/200812/2/47202117594.jpg" alt="魅力泉州" /></td>
<td><img src="/uploadfile/200812/2/E8202117744.jpg" alt="魅力泉州" /></td>
</tr>
</table>
</div>
</div>
<div class="case">
<div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 纵向模式</div>
<div id="MyMarqueeY">
<img src="/uploadfile/200812/2/6D202116643.jpg" alt="魅力泉州" /><br />
<img src="/uploadfile/200812/2/F1202116566.jpg" alt="魅力泉州" /><br />
<img src="/uploadfile/200812/2/B9202116170.jpg" alt="魅力泉州" /><br />
<img src="/uploadfile/200812/2/85202116414.jpg" alt="魅力泉州" /><br />
<img src="/uploadfile/200812/2/47202117594.jpg" alt="魅力泉州" /><br />
<img src="/uploadfile/200812/2/E8202117744.jpg" alt="魅力泉州" /><br />
</div>
</div>
<script language="javascript" type="text/javascript">
//<!--
/*********************************************
- Marquee 演示
*********************************************/
new Marquee({
obj : 'MyMarqueeX',
movePause : false
});
new Marquee({
obj : 'MyMarqueeY',
mode : 'y'
});
//-->
</script>
</body>
</html>
各种滚动都有
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Marquee 替代 -- 无间滚动</title>
<style type="text/css">
<!--
* {padding: 0; margin: 0}
body {margin: 3em; font: 12px Tahoma; background: #EAEAEA; color: #333333; line-height: 20px}
input, textarea {font: 12px Tahoma; color: #666666; padding: 2px; border: solid 1px #DBDBDB}
textarea {padding: 5px; line-height: 20px}
p {margin: 1em 0}
ul {}
li {height: 1%; overflow: hidden; list-style-type: none}
a {color: #666666; text-decoration: none}
a:hover {color: #333333}
.r {float: right}
.l {float: left}
.b {font-weight: bold}
.gray {color: #666666; margin-top: 8px}
.light {color:#FF6600; margin: 0 5px}
.case {display: block; padding: 0 2em 2em 2em; border: solid 1px #EAEAEA; background: #FFFFFF; margin-bottom: 2em; height: 1%; overflow: hidden}
.title {display:block; padding: .5em 2em .5em 1em; margin: 0 -2em 2em -2em; font-weight: bold; color: #000000; background: #FAFAFA; border-bottom: solid 1px #EAEAEA}
.call {display:block;}
.key {display: block; width: 8em; float: left}
.type {display: block; width: 6em; float: left}
.info {padding-left: 2em}
.demo {margin-bottom: 2em}
-->
</style>
<style type="text/css">
<!--
#MyMarqueeX {width: 98%; height: 150px; overflow: hidden; margin: 0 auto 0 auto}
#MyMarqueeX img {width: 185px; height: 125px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px}
#MyMarqueeY {width: 205px; height: 420px; overflow: hidden;}
#MyMarqueeY img {width: 185px; height: 125px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px}
-->
</style>
<script language="javascript" type="text/javascript">
//<!--
// 附带函数
var
// 用ID获取元素
$ = function(element) {
return typeof(element) == 'object' ? element : document.getElementById(element);
},
// 生成随机数
RandStr = function(n, u){
var tmStr = "abcdefghijklmnopqrstuvwxyz0123456789";
var Len = tmStr.length;
var Str = "";
for(i=1;i<n+1;i++){
Str += tmStr.charAt(Math.random()*Len);
}
return (u ? Str.toUpperCase() : Str);
};
//-->
</script>
<script language="javascript" type="text/javascript">
//<!--
/*******************************************
- Marquee 替代 -- 无间滚动
- By Mudoo 2008.8
- http://hi.baidu.com/mt20
********************************************
new Marquee({
obj : 'myMarquee', // 滚动对象（必须）
name : 'MyMQ_1', // 实例名（可选，不指定则随机）
mode : 'x', // 滚动模式（可选，x=水平, y=垂直，默认x）
speed : 10, // 滚动速度（可选，越小速度越快，默认10）
autoStart : true, // 自动开始（可选，默认True）
movePause : true // 鼠标经过是否暂停（可选，默认True）
});
********************************************/
var MyMarquees = new Array();
// 获取检测实例名
function getMyMQName(mName) {
var name = mName==undefined ? RandStr(5) : mName;
var myNames = ','+ MyMarquees.join(',') +',';
while(myNames.indexOf(','+ name +',')!=-1) {
name = RandStr(5);
}
return name;
}
function Marquee(inits) {
var _o = this;
var _i = inits;
if(_i.obj==undefined) return;
_o.mode = _i.mode==undefined ? 'x' : _i.mode; // 滚动模式(x:横向, y:纵向)
_o.mName = getMyMQName(_i.name); // 实例名
_o.mObj = $(_i.obj); // 滚动对象
_o.speed = _i.speed==undefined ? 10 : _i.speed; // 滚动速度
_o.autoStart= _i.autoStart==undefined ? true : _i.autoStart;// 自动开始
_o.movePause= _i.movePause==undefined ? true : _i.movePause;// 鼠标经过是否暂停
_o.mDo = null; // 计时器
_o.pause = false; // 暂停状态
// 无间滚动初始化
_o.init = function() {
if((_o.mObj.scrollWidth<=_o.mObj.offsetWidth && _o.mode=='x') && (_o.mObj.scrollHeight<=_o.mObj.offsetHeight && _o.mode=='y')) return;
MyMarquees.push(_o.mName);
// 克隆滚动内容
_o.mObj.innerHTML = _o.mode=='x' ? (
'<table width="100%" border="0" align="left" cellpadding="0" cellspace="0">'+
' <tr>'+
' <td id="MYMQ_'+ _o.mName +'_1">'+ _o.mObj.innerHTML +'</td>'+
' <td id="MYMQ_'+ _o.mName +'_2">'+ _o.mObj.innerHTML +'</td>'+
' </tr>'+
'</table>'
) : (
'<div id="MYMQ_'+ _o.mName +'_1">'+ _o.mObj.innerHTML +'</div>'+
'<div id="MYMQ_'+ _o.mName +'_2">'+ _o.mObj.innerHTML +'</div>'
);
// 获取对象、高宽
_o.mObj1 = $('MYMQ_'+ _o.mName +'_1');
_o.mObj2 = $('MYMQ_'+ _o.mName +'_2');
_o.mo1Width = _o.mObj1.scrollWidth;
_o.mo1Height = _o.mObj1.scrollHeight;
// 初始滚动
if(_o.autoStart) _o.start();
};
// 开始滚动
_o.start = function() {
_o.mDo = setInterval((_o.mode=='x' ? _o.moveX : _o.moveY), _o.speed);
if(_o.movePause) {
_o.mObj.onmouseover = function() {_o.pause = true;}
_o.mObj.onmouseout = function() {_o.pause = false;}
}
}
// 停止滚动
_o.stop = function() {
clearInterval(_o.mDo)
_o.mObj.onmouseover = function() {}
_o.mObj.onmouseout = function() {}
}
// 水平滚动
_o.moveX = function() {
if(_o.pause) return;
var left = _o.mObj.scrollLeft;
if(left==_o.mo1Width){
_o.mObj.scrollLeft = 0 ;
}else if(left>_o.mo1Width) {
_o.mObj.scrollLeft = left-_o.mo1Width;
}else{
_o.mObj.scrollLeft++;
}
};
// 垂直滚动
_o.moveY = function() {
if(_o.pause) return;
var top = _o.mObj.scrollTop;
if(top==_o.mo1Height){
_o.mObj.scrollTop = 0 ;
}else if(top>_o.mo1Height) {
_o.mObj.scrollTop = top-_o.mo1Height;
}else{
_o.mObj.scrollTop++;
}
};
_o.init();
}
//-->
</script>
</head>
<body>
<div class="case">
<div class="title"><a href="#" class="r">Top</a>Marquee 调用方法</div>
<div class="b">new Marquee({obj, name, mode, speed, autoStart, movePause});</div>
<ul class="info gray">
<li><span class="key">obj：</span><span class="type">Object</span>滚动对象 (*必须)</li>
<li><span class="key">name：</span><span class="type">String</span>实例名 (*可选，默认随机)</li>
<li><span class="key">mode：</span><span class="type">String</span>滚动模式(x=水平, y=垂直) (*可选,默认为x)</li>
<li><span class="key">speed：</span><span class="type">Number</span>滚动速度，越小速度越快 (*可选，默认10)</li>
<li><span class="key">autoStart：</span><span class="type">Boolean</span>自动开始 (*可选，默认True)</li>
<li><span class="key">movePause：</span><span class="type">Boolean</span>鼠标经过是否暂停 (*可选，默认True)</li>
</ul>
</div>
<div class="case">
<div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 横向模式</div>
<div id="MyMarqueeX">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="/uploadfile/200812/2/6D202116643.jpg" alt="魅力泉州" /></td>
<td><img src="/uploadfile/200812/2/F1202116566.jpg" alt="魅力泉州" /></td>
<td><img src="/uploadfile/200812/2/B9202116170.jpg" alt="魅力泉州" /></td>
<td><img src="/uploadfile/200812/2/85202116414.jpg" alt="魅力泉州" /></td>
<td><img src="/uploadfile/200812/2/47202117594.jpg" alt="魅力泉州" /></td>
<td><img src="/uploadfile/200812/2/E8202117744.jpg" alt="魅力泉州" /></td>
</tr>
</table>
</div>
</div>
<div class="case">
<div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 纵向模式</div>
<div id="MyMarqueeY">
<img src="/uploadfile/200812/2/6D202116643.jpg" alt="魅力泉州" /><br />
<img src="/uploadfile/200812/2/F1202116566.jpg" alt="魅力泉州" /><br />
<img src="/uploadfile/200812/2/B9202116170.jpg" alt="魅力泉州" /><br />
<img src="/uploadfile/200812/2/85202116414.jpg" alt="魅力泉州" /><br />
<img src="/uploadfile/200812/2/47202117594.jpg" alt="魅力泉州" /><br />
<img src="/uploadfile/200812/2/E8202117744.jpg" alt="魅力泉州" /><br />
</div>
</div>
<script language="javascript" type="text/javascript">
//<!--
/*********************************************
- Marquee 演示
*********************************************/
new Marquee({
obj : 'MyMarqueeX',
movePause : false
});
new Marquee({
obj : 'MyMarqueeY',
mode : 'y'
});
//-->
</script>
</body>
</html>
各种滚动都有
追问
您好，我选的横向滚动的，遨游下不滚动，IE下速度很慢，我已经把speed设置成1了，IE下还是很慢，只有FF下还不错，还有什么好的方法吗？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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" />
<style type="text/css">
body,div {margin:0; padding:0;}
body {padding:1em 0;}
img {border:0; font-size:0; line-height:0;}
#demoLeft {margin:0 auto;overflow:hidden;width:950px;height:134px;background:#fff;}
#demo1,#demo2 {float: left;}
#demo1 a,#demo2 a {display:block;float:left;margin-left:10px;}
#demo1 img,#demo2 img{width:178px;height:134px;}
</style>
<title>无缝图片滚动-02</title>
</head>
<body>
<div id="demoLeft">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>
<a href="#"><img src="images/4.jpg" /></a>
<a href="#"><img src="images/5.jpg" /></a>
<a href="#"><img src="images/6.jpg" /></a>
<a href="#"><img src="images/7.jpg" /></a>
<a href="#"><img src="images/8.jpg" /></a>
<a href="#"><img src="images/9.jpg" /></a>
<a href="#"><img src="images/10.jpg" /></a>
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>
<a href="#"><img src="images/4.jpg" /></a>
<a href="#"><img src="images/5.jpg" /></a>
<a href="#"><img src="images/6.jpg" /></a>
<a href="#"><img src="images/7.jpg" /></a>
<a href="#"><img src="images/8.jpg" /></a>
<a href="#"><img src="images/9.jpg" /></a>
<a href="#"><img src="images/10.jpg" /></a>
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>1
</div>
<div id="demo2"></div>
</div>
</div>
<script type="text/javascript">
var speed=10;
var indemo=document.getElementById("indemo");
var tabLeft=document.getElementById("demoLeft");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
ch_div();
tab2.innerHTML=tab1.innerHTML;
//alert(" 2 tab2.scrollWidth="+tab2.scrollWidth);
function Marquee1(){
if(tabLeft.scrollLeft>=tab1.scrollWidth)
tabLeft.scrollLeft=0;
else{
tabLeft.scrollLeft+=2;
}
//alert(tabLeft.scrollLeft+" tab1.scrollWidth="+tab1.scrollWidth);
}
var MyMar=setInterval(Marquee1,speed);
tabLeft.onmouseover=function() {clearInterval(MyMar)};
tabLeft.onmouseout=function() {MyMar=setInterval(Marquee1,speed)};
function ch_div()
{
var w1=tab1.scrollWidth;
var w2=tabLeft.style.Width;
if(w1<w2)
{
tab1.innerHTML+=tab1.innerHTML;
}
tab1.style.width=tab1.scrollWidth+"px";
tab2.style.width=tab1.scrollWidth+"px";
indemo.style.width=2*(tab1.scrollWidth)+"px";
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body,div {margin:0; padding:0;}
body {padding:1em 0;}
img {border:0; font-size:0; line-height:0;}
#demoLeft {margin:0 auto;overflow:hidden;width:950px;height:134px;background:#fff;}
#demo1,#demo2 {float: left;}
#demo1 a,#demo2 a {display:block;float:left;margin-left:10px;}
#demo1 img,#demo2 img{width:178px;height:134px;}
</style>
<title>无缝图片滚动-02</title>
</head>
<body>
<div id="demoLeft">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>
<a href="#"><img src="images/4.jpg" /></a>
<a href="#"><img src="images/5.jpg" /></a>
<a href="#"><img src="images/6.jpg" /></a>
<a href="#"><img src="images/7.jpg" /></a>
<a href="#"><img src="images/8.jpg" /></a>
<a href="#"><img src="images/9.jpg" /></a>
<a href="#"><img src="images/10.jpg" /></a>
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>
<a href="#"><img src="images/4.jpg" /></a>
<a href="#"><img src="images/5.jpg" /></a>
<a href="#"><img src="images/6.jpg" /></a>
<a href="#"><img src="images/7.jpg" /></a>
<a href="#"><img src="images/8.jpg" /></a>
<a href="#"><img src="images/9.jpg" /></a>
<a href="#"><img src="images/10.jpg" /></a>
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>1
</div>
<div id="demo2"></div>
</div>
</div>
<script type="text/javascript">
var speed=10;
var indemo=document.getElementById("indemo");
var tabLeft=document.getElementById("demoLeft");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
ch_div();
tab2.innerHTML=tab1.innerHTML;
//alert(" 2 tab2.scrollWidth="+tab2.scrollWidth);
function Marquee1(){
if(tabLeft.scrollLeft>=tab1.scrollWidth)
tabLeft.scrollLeft=0;
else{
tabLeft.scrollLeft+=2;
}
//alert(tabLeft.scrollLeft+" tab1.scrollWidth="+tab1.scrollWidth);
}
var MyMar=setInterval(Marquee1,speed);
tabLeft.onmouseover=function() {clearInterval(MyMar)};
tabLeft.onmouseout=function() {MyMar=setInterval(Marquee1,speed)};
function ch_div()
{
var w1=tab1.scrollWidth;
var w2=tabLeft.style.Width;
if(w1<w2)
{
tab1.innerHTML+=tab1.innerHTML;
}
tab1.style.width=tab1.scrollWidth+"px";
tab2.style.width=tab1.scrollWidth+"px";
indemo.style.width=2*(tab1.scrollWidth)+"px";
}
</script>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
