js 走马灯,该怎么处理
日期：2014-05-17 浏览次数：20951 次
js 走马灯
想做在div里做一个走马丁的效果
<div id="txt">我爱北京天安门，我爱中国</div>
请问怎么写代码用按钮控制向左还是向右，还有一个停止按钮
------最佳解决方案--------------------
想做在div里做一个走马丁的效果
<div id="txt">我爱北京天安门，我爱中国</div>
请问怎么写代码用按钮控制向左还是向右，还有一个停止按钮
------最佳解决方案--------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
img{border: none;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var speed=30;
var demo = $("#demo");
var demo1 = $("#demo1");
var demo2 = $("#demo2");
demo2.html(demo1.html());
function Marquee(){
if(demo.scrollLeft()>=demo1.width())
demo.scrollLeft(0);
else{
demo.scrollLeft(demo.scrollLeft()+1);
}
}
var MyMar=setInterval(Marquee,speed)
demo.mouseover(function() {
clearInterval(MyMar);
} )
demo.mouseout(function() {
MyMar=setInterval(Marquee,speed);
} )
});
</script>
</head>
<body>
<div id="demo" style="overflow:hidden;width:500px;">
<table border=0 align=center cellpadding=0 cellspacing=0 >
<tr>
<td id="demo1" valign="top" bgcolor="#ffffff" >
<!-- 特别注意，下面的图片总宽度必须大于上面定义的demo的宽度，如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题！ -->
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td><a href="#" target="_blank"><img alt="1" src="01.jpg" width="150" height="100"></a></td>
<td><a href="#" target="_blank"><img alt="2" src="02.jpg" width="150" height="100"></a></td>
<td><a href="#" target="_blank"><img alt="3" src="03.jpg" width="150" height="100"></a></td>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
