您的位置：首页 > Web前端 > JavaScript

DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码

2013-10-09 11:26 1181 查看 
（含上下左右滚动代码）

<!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>
<title></title>
<style type="text/css">
<!--
UL {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
LIST-STYLE-POSITION: outside;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
overflow: hidden;
}

#S_LIST LI {
width:154px;
height:auto;
float:left;
padding: 0px;
margin: 0px;
list-style-image: none;
list-style-type: none;
}
#S_LIST A {
DISPLAY: block;
MARGIN: 0px;
WIDTH: 154px;
HEIGHT: auto;
TEXT-ALIGN: center;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
}
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 930px;
height:180px;
}
#demo img {
border: 1px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
</head>
<body>
<div id="demo">
<div id="indemo">
<div id="demo1">
<ul id="S_LIST">
<li><a href="#"><img src="1.jpg" width="154" height="130" border="0" /></a>
<a href="#" >1</a></li>
<li><a href="#"><img src="2.jpg" width="154" height="130" border="0" /></a>
<a href="#" >2</a></li>
<li><a href="#"><img src="3.jpg" width="154" height="130" border="0" /></a>
<a href="#" >3</a></li>
<li><a href="#"><img src="4.jpg" width="154" height="130" border="0" /></a>
<a href="#" >4</a></li>
<li><a href="#"><img src="5.jpg" width="154" height="130" border="0" /></a>
<a href="#" >5</a></li>
<li><a href="#"><img src="6.jpg" width="154" height="130" border="0" /></a>
<a href="#" >6</a></li>
<li><a href="#"><img src="7.jpg" width="154" height="130" border="0" /></a>
<a href="#" >7</a></li>
<li><a href="#"><img src="8.jpg" width="154" height="130" border="0" /></a>
<a href="#" >8</a></li>
<li><a href="#"><img src="9.jpg" width="154" height="130" border="0" /></a>
<a href="#" >9</a></li>
</ul>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10;
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>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

上下滚动代码：
<div id="demo" style="overflow:hidden;height:500px;width:120px; border:1px solid #dde5bc; overflow:hidden;float:left">
<div id=demo1>
<img src="images/js01.gif" width="120" height="120">
<img src="images/js02.gif" width="120" height="120">
<img src="images/js03.gif" width="120" height="120">
<img src="images/js04.gif" width="120" height="120">
<img src="images/js05.gif" width="120" height="120">
<img src="images/js06.gif" width="120" height="120">
<img src="images/js07.gif" width="120" height="120">
<img src="images/js08.gif" width="120" height="120">
<img src="images/js09.gif" width="120" height="120">
</div>
<div id=demo2></div>
</div>
<script>
var speed=40
var demo=document.getElementById("demo");
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航