html代碼:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
a{ text-decoration:none;}
#Marquee_1_1{ width:980px; margin:0 auto;}
.photos {
background: #FFF;
overflow: hidden;
border-bottom: 1px dashed #CCC;
}
.photos img {
width: 270px;
height: 130px;
border: none;
}
</style>
</head>
<body>
<div id="Marquee_1_1" class="photos" style="overflow: hidden; width: 960px;">
<table cellpadding="0" align="left" border="0" cellspace="0">
<tr>
<td id="Marquee_1_2" nowrap="nowrap"><a href="javascript:"> <img src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" alt="" /> </a> <a href="javascript:"> <img src="posts/01_140x100.jpg" alt="" /> </a> <a href="javascript:"> <img src="posts/01_140x100.jpg" alt="" /> </a> <a href="javascript:"> <img src="posts/01_140x100.jpg" alt="" /> </a> <a href="javascript:"> <img src="posts/01_140x100.jpg" alt="" /> </a> <a href="javascript:"> <img src="posts/01_140x100.jpg" alt="" /> </a> <a href="javascript:"> <img src="posts/01_140x100.jpg" alt="" /> </a> <a href="javascript:"> <img src="posts/01_140x100.jpg" alt="" /> </a> <a href="javascript:"> <img src="posts/01_140x100.jpg" alt="" /> </a> <a href="javascript:"> <img src="posts/01_140x100.jpg" alt="" /> </a></td>
<td id="Marquee_1_3" nowrap="nowrap"></td>
</tr>
</table>
</div>
<script src="jquery-1.5.1.js" type="text/javascript"></script>
<script src="marquee.js" type="text/javascript"></script>
</body>
</html>
marquee.js 代碼:
var Marquee_1_isMar = true;
var Marquee_1_1 = document.getElementById("Marquee_1_1");
var Marquee_1_2 = document.getElementById("Marquee_1_2");
var Marquee_1_3 = document.getElementById("Marquee_1_3");
if (Marquee_1_1.style.pixelWidth) {
Marquee_1_isMar = Marquee_1_2.offsetWidth > Marquee_1_1.style.pixelWidth;
} else {
var Marquee_1_width = parseInt(Marquee_1_1.style.width.replace('%', '').replace('px', ''));
Marquee_1_isMar = Marquee_1_2.offsetWidth > Marquee_1_width;
}
if (Marquee_1_isMar) {
Marquee_1_3.innerHTML = Marquee_1_2.innerHTML;
function Marquee_1_function() {
if (Marquee_1_3.offsetLeft - Marquee_1_1.scrollLeft <= 0)
Marquee_1_1.scrollLeft -= Marquee_1_2.offsetWidth;
else {
Marquee_1_1.scrollLeft++
}
}
var Marquee_1_myMar = setInterval(Marquee_1_function, 40);
Marquee_1_1.onmouseover = function () { clearInterval(Marquee_1_myMar) }
Marquee_1_1.onmouseout = function () { Marquee_1_myMar = setInterval(Marquee_1_function, 40) }
}