展开全部
代码：
<title></title>
<style>
body{
margin:0;
padding:0;
background-color:transparent;
}
div{
width:350px;
overflow:hidden;
}
table img{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="picScroll">
<table>
<tr>
<td><a><img src="../pic/1.jpg" /></a></td>
<td><a><img src="../pic/2.jpg"></a></td>
<td><a><img src="../pic/3.jpg"></a></td>
<td><a><img src="../pic/4.jpg"></a></td>
<td><a><img src="../pic/5.jpg"></a></td>
</tr>
</table>
</div>
</body>
</html>
<script>
var target = $('#picScroll');
var left = 0;
var speed = 30;
function Marqeen() {
if (target[0].offsetWidth <= left) {
left -= target[0].offsetWidth;
}
else {
left++;
}
target.scrollLeft(left);
}
$(function () {
var marQueen = window.setInterval(Marqeen, speed);
target.mouseover(function () {
clearInterval(marQueen);
});
target.mouseout(function () {
marQueen = window.setInterval(Marqeen, speed);
});
});
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
根据楼上做了点修改，这是用jquery，所以一定要链接jquery库。
<html>
<head>
<title></title>
<style type="text/css">
body, ul, li {list-style: none outside none; padding: 0; margin: 0;}
#picScroll {width: 350px; overflow: hidden;}
ul {width: 1000%;}
ul li {float: left;}
li img {width: 100px; height: 100px;}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="picScroll">
<ul>
<li>
<a><img src="../pic/1.jpg"/></a>
<a><img src="../pic/2.jpg"/></a>
<a><img src="../pic/3.jpg"/></a>
<a><img src="../pic/4.jpg"/></a>
<a><img src="../pic/5.jpg"/></a>
</li>
<li></li>
</ul>
</div>
<script type="text/javascript">
var target = $('#picScroll');//其实标准的写法是var $target = $('#picScroll');
var left = 0;
var speed = 30;
var li = $('#picScroll ul li');
li.eq(1).html(li.eq(0).html());//复制第一个li节点内容，赋值给第二个li目的是为了实现无限循环滚动
function Marqeen() {
if (li[0].offsetWidth<= left) {
left -= li[0].offsetWidth;
}
else {
left++;
}
target.scrollLeft(left);
}
$(function () {
var marQueen = window.setInterval(Marqeen, speed);
target.mouseover(function () {
clearInterval(marQueen);
});
target.mouseout(function () {
marQueen = window.setInterval(Marqeen, speed);
});
});
</script>
</body>
</html>
下面是用 js 写的，不用连接jquery库了，可以对比一下上面的jquery代码
<script type="text/javascript">
var target = document.getElementById('picScroll');
var left = 0;
var speed = 30;
var LI = target.getElementsByTagName('li');
LI[1].innerHTML = LI[0].innerHTML;
function Marqeen() {
if (LI[0].offsetWidth <= left) {
left -= LI[0].offsetWidth;
}
else {
left++;
}
target.scrollLeft = left;
}
var marQueen = window.setInterval(Marqeen, speed);
target.mouseover = function () {
clearInterval(marQueen);
};
target.mouseout = function () {
marQueen = window.setInterval(Marqeen, speed);};
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
