div+css布局的圖片連續滾動js實現代碼
2024-05-06 14:10:10
供稿：網友
html布局代碼
代碼如下:
<!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>
<script type="text/javascript" src="Marquee.js"></script>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
#demo {
/*********必須的 保證超出寬度能夠滾動*********/
width:600px;/*可視區域寬度*/
overflow:hidden;
/*********必須的 保證超出寬度能夠滾動*********/
height:80px;
}
#demo1,#demo2 {
width:800px;/*整個圖片寬度*/
float:left;
}
#demo img{
display:block;
float:left;
}
#demo li {
float:left;
width:60px;
height:80px;
}
-->
<!--
#demo0 {
/*********必須的 保證超出寬度能夠滾動*********/
width:600px;/*可視區域寬度*/
overflow:hidden;
/*********必須的 保證超出寬度能夠滾動*********/
height:80px;
}
#demo11,#demo22 {
width:1020px;/*整個圖片寬度*/
display:block;
height:80px;
}
#demo0 li {
float:left;
margin:0 5px;
width:60px;
height:80px;
}
-->
</style>
</head>
<body>
<!--結構必須的——<div class="demo">
<div class="demo1"></div>
<div class="demo2"></div>
</div>——結構必須的——-->
<div id="demo">
<ul id="demo1">
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
