如何实现图片不停地向左滚动
日期：2014-05-16 浏览次数：20518 次
怎么实现图片不停地向左滚动？
如何实现图片不停地向左滚动？没有按钮的~~~~
------解决方案--------------------
代码如下，自己放上图片测试吧
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.highslide
{
line-height:2em;
text-decoration:none;
}
</style>
</head>
<body>
<div id="jsweb8_cn_right" style="overflow:hidden;width:1000px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="jsweb8_cn_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="5" border="0">
<tr align="center">
<td><a class='highslide' href='001.jpg' ><img width="170" height="125" src='001.jpg' /></a></td>
<td><a class='highslide' href='002.jpg' ><img width="170" height="125" src='002.jpg' /></a></td>
<td><a class='highslide' href='003.jpg' ><img width="170" height="125" src='003.jpg' /></a></td>
<td><a class='highslide' href='004.jpg' ><img width="170" height="125" src='004.jpg' /></a></td>
<td><a class='highslide' href='005.jpg' ><img width="170" height="125" src='005.jpg' /></a></td>
<td><a class='highslide' href='006.jpg' ><img width="170" height="125" src='006.jpg' /></a></td>
<td><a class='highslide' href='007.jpg' ><img width="170" height="125" src='007.jpg' /></a></td>
<td><a class='highslide' href='008.jpg' ><img width="170" height="125" src='008.jpg' /></a></td>
<td><a class='highslide' href='009.jpg' ><img width="170" height="125" src='009.jpg' /></a></td>
<td><a class='highslide' href='010.jpg' ><img width="170" height="125" src='010.jpg' /></a></td>
</tr>
</table>
</td>
<td id="jsweb8_cn_right2" valign="top"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var speed = 30//速度数值越大速度越慢
var jsweb8_cn_right2 = document.getElementById("jsweb8_cn_right2");
var jsweb8_cn_right1 = document.getElementById("jsweb8_cn_right1");
var jsweb8_cn_right = document.getElementById("jsweb8_cn_right");
jsweb8_cn_right2.innerHTML = jsweb8_cn_right1.innerHTML;
function Marquee4() {
if (jsweb8_cn_right.scrollLeft <= 0)
jsweb8_cn_right.scrollLeft += jsweb8_cn_right2.offsetWidth;
else {
jsweb8_cn_right.scrollLeft++;
}
}
var MyMar4 = setInterval(Marquee4, speed);
jsweb8_cn_right.onmouseover = function () { clearInterval(MyMar4) };
jsweb8_cn_right.onmouseout = function () { MyMar4 = setInterval(Marquee4, speed) };
</script>
</body>
</html>
如何实现图片不停地向左滚动？没有按钮的~~~~
------解决方案--------------------
代码如下，自己放上图片测试吧
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.highslide
{
line-height:2em;
text-decoration:none;
}
</style>
</head>
<body>
<div id="jsweb8_cn_right" style="overflow:hidden;width:1000px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="jsweb8_cn_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="5" border="0">
<tr align="center">
<td><a class='highslide' href='001.jpg' ><img width="170" height="125" src='001.jpg' /></a></td>
<td><a class='highslide' href='002.jpg' ><img width="170" height="125" src='002.jpg' /></a></td>
<td><a class='highslide' href='003.jpg' ><img width="170" height="125" src='003.jpg' /></a></td>
<td><a class='highslide' href='004.jpg' ><img width="170" height="125" src='004.jpg' /></a></td>
<td><a class='highslide' href='005.jpg' ><img width="170" height="125" src='005.jpg' /></a></td>
<td><a class='highslide' href='006.jpg' ><img width="170" height="125" src='006.jpg' /></a></td>
<td><a class='highslide' href='007.jpg' ><img width="170" height="125" src='007.jpg' /></a></td>
<td><a class='highslide' href='008.jpg' ><img width="170" height="125" src='008.jpg' /></a></td>
<td><a class='highslide' href='009.jpg' ><img width="170" height="125" src='009.jpg' /></a></td>
<td><a class='highslide' href='010.jpg' ><img width="170" height="125" src='010.jpg' /></a></td>
</tr>
</table>
</td>
<td id="jsweb8_cn_right2" valign="top"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var speed = 30//速度数值越大速度越慢
var jsweb8_cn_right2 = document.getElementById("jsweb8_cn_right2");
var jsweb8_cn_right1 = document.getElementById("jsweb8_cn_right1");
var jsweb8_cn_right = document.getElementById("jsweb8_cn_right");
jsweb8_cn_right2.innerHTML = jsweb8_cn_right1.innerHTML;
function Marquee4() {
if (jsweb8_cn_right.scrollLeft <= 0)
jsweb8_cn_right.scrollLeft += jsweb8_cn_right2.offsetWidth;
else {
jsweb8_cn_right.scrollLeft++;
}
}
var MyMar4 = setInterval(Marquee4, speed);
jsweb8_cn_right.onmouseover = function () { clearInterval(MyMar4) };
jsweb8_cn_right.onmouseout = function () { MyMar4 = setInterval(Marquee4, speed) };
</script>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
