jquery 圖片無間隔循環滾動

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) }
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章