横向图文无缝滚动代码，全兼容
分享一个横向图片无缝滚动代码，全兼容，文字滚动效果。滚动的速度是可以调节的，是在JS的第一行，Speed参数越大速度越慢。JS图片滚动代码分享大家。
当前位置：编程学习 > JS >>
答案：<!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>分享一个横向图文无缝滚动的代码，全兼容</title>
</head>
<body>
<style type="text/css">
<!--
ul,li,div{margin:0; padding:0; font-size:12px;}
#demo {
width:678px; float:left; overflow:hidden;height:144px; border:none;
}
#indemo {
float: left;
width: 800%;
}
#demo1,#demo2{height:144px;float:left; display:inline-table;}
#demo1 li,#demo2 li{ width:127px; height:144px; float:left; padding-left:8px; }
#demo1 li img,#demo2 li img{ display:block; background:#ccc; padding:1px; border:1px solid #ccc;}
#demo1 li span,#demo2 li span{ width:127px; height:30px; line-height:30px; text-align:center; overflow:hidden;}
#demo1 {
float: left;
}
#demo2 {
float: left;
.lmboxb ul {
margin-left:12px;
margin-top:5px;
}
.lmboxb ul li {}
.lmboxb ul li a {
line-height:24px;}
}
-->
</style>
<div id="demo">
<div id="indemo">
<div class="lmboxb" id="demo1">
<ul>
<li>
<div><a href="#" title="春季女性补血食谱"><img src="/jscss/demoimg/wall_s1.jpg" width="140" height="106" alt="春季女性补血食谱" /></a></div>
<div><a href="#">春季女性补血食谱</a></div>
</li><li>
<div><a href="#" title="大枣木耳汤 神情气爽"><img src="/jscss/demoimg/wall_s2.jpg" width="140" height="106" alt="大枣木耳汤 神情气爽" /></a></div>
<div><a href="#">大枣木耳汤 神情气爽</a></div>
</li><li>
<div><a href="#" title="春季女性补血食谱"><img src="/jscss/demoimg/wall_s1.jpg" width="140" height="106" alt="春季女性补血食谱" /></a></div>
<div><a href="#">春季女性补血食谱</a></div>
</li><li>
<div><a href="#" title="大枣木耳汤 神情气爽"><img src="/jscss/demoimg/wall_s3.jpg" width="140" height="106" alt="大枣木耳汤 神情气爽" /></a></div>
<div><a href="#">大枣木耳汤 神情气爽</a></div>
</li><li>
<div><a href="#" title="大枣木耳汤 神情气爽"><img src="/jscss/demoimg/wall_s1.jpg" width="140" height="106" alt="大枣木耳汤 神情气爽" /></a></div>
<div><a href="#">大枣木耳汤 神情气爽</a></div>
</li>
</ul>
</div>
<div id="demo2"></div>
</div>
</div>
<div style="width:100%;"><br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<script>
<!--
var speed=20; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</body>
</html>上一个：图像移动效果，小图片移动
下一个：显示隐藏的分享图标
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。
- JS怎样操作PHP中的参数
- js 怎么在一打开页面就加载这个函数。
- Date.parse()的问题(js)
- <script src="/{maxcms:sitepath}js/common.js"></script>是什么意思