<html>
<head>
<title>无缝滚动图片</title>
<script type="text/javascript" src="jquery-1.7.1.min.js">
</script></head>
<body>
<!--以下是向左滚动代码-->
<div id="colee_left" style="overflow:hidden;730px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="colee_left1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td style="padding-right:15px;"><img src="~/Content/themes/default/images/activecard.jpg" width="165" height="125"><br /><div style="text-align:center" title="@typeName">苹果电脑</div></td>
<td style="padding-right:15px;"><img src="~/Content/themes/default/images/activecard.jpg" width="165" height="125"><br /><div style="text-align:center" title="@typeName">苹果电脑</div></td>
<td style="padding-right:15px;"><img src="~/Content/themes/default/images/activecard.jpg" width="165" height="125"><br /><div style="text-align:center" title="@typeName">苹果电脑</div></td>
<td style="padding-right:15px;"><img src="~/Content/themes/default/images/activecard.jpg" width="165" height="125"><br /><div style="text-align:center" title="@typeName">苹果电脑</div></td>
<td style="padding-right:15px;"><img src="~/Content/themes/default/images/activecard.jpg" width="165" height="125"><br /><div style="text-align:center" title="@typeName">苹果电脑</div></td>
</tr>
</table>
</td>
<td id="colee_left2" valign="top"></td>
</tr>
</table>
</div>
<script type="text/javascript">
if ($("#colee_left1 img").length > 4) {
clearInterval(MyMar3);
//使用div时,请保证colee_left2与colee_left1是在同一行上.
var speed = 30//速度数值越大速度越慢
var colee_left2 = document.getElementById("colee_left2");
var colee_left1 = document.getElementById("colee_left1");
var colee_left = document.getElementById("colee_left");
colee_left2.innerHTML = colee_left1.innerHTML
function Marquee3() {
if (colee_left2.offsetWidth - colee_left.scrollLeft <= 0)//offsetWidth 是对象的可见宽度
colee_left.scrollLeft -= colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽,不包边线宽度
else {
colee_left.scrollLeft++
}
}
var MyMar3 = setInterval(Marquee3, speed)
colee_left.onmouseover = function () { clearInterval(MyMar3) }
colee_left.onmouseout = function () { MyMar3 = setInterval(Marquee3, speed) }
}
</script>
<!--结束离开滚动码-->
</body>
</html>
<head>
<title>无缝滚动图片</title>
<script type="text/javascript" src="jquery-1.7.1.min.js">
</script></head>
<body>
<!--以下是向左滚动代码-->
<div id="colee_left" style="overflow:hidden;730px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="colee_left1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td style="padding-right:15px;"><img src="~/Content/themes/default/images/activecard.jpg" width="165" height="125"><br /><div style="text-align:center" title="@typeName">苹果电脑</div></td>
<td style="padding-right:15px;"><img src="~/Content/themes/default/images/activecard.jpg" width="165" height="125"><br /><div style="text-align:center" title="@typeName">苹果电脑</div></td>
<td style="padding-right:15px;"><img src="~/Content/themes/default/images/activecard.jpg" width="165" height="125"><br /><div style="text-align:center" title="@typeName">苹果电脑</div></td>
<td style="padding-right:15px;"><img src="~/Content/themes/default/images/activecard.jpg" width="165" height="125"><br /><div style="text-align:center" title="@typeName">苹果电脑</div></td>
<td style="padding-right:15px;"><img src="~/Content/themes/default/images/activecard.jpg" width="165" height="125"><br /><div style="text-align:center" title="@typeName">苹果电脑</div></td>
</tr>
</table>
</td>
<td id="colee_left2" valign="top"></td>
</tr>
</table>
</div>
<script type="text/javascript">
if ($("#colee_left1 img").length > 4) {
clearInterval(MyMar3);
//使用div时,请保证colee_left2与colee_left1是在同一行上.
var speed = 30//速度数值越大速度越慢
var colee_left2 = document.getElementById("colee_left2");
var colee_left1 = document.getElementById("colee_left1");
var colee_left = document.getElementById("colee_left");
colee_left2.innerHTML = colee_left1.innerHTML
function Marquee3() {
if (colee_left2.offsetWidth - colee_left.scrollLeft <= 0)//offsetWidth 是对象的可见宽度
colee_left.scrollLeft -= colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽,不包边线宽度
else {
colee_left.scrollLeft++
}
}
var MyMar3 = setInterval(Marquee3, speed)
colee_left.onmouseover = function () { clearInterval(MyMar3) }
colee_left.onmouseout = function () { MyMar3 = setInterval(Marquee3, speed) }
}
</script>
<!--结束离开滚动码-->
</body>
</html>