<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../style/js/jquery.min.js"></script>
<style type="text/css">
* { margin: 0px;padding: 0px;}
.content { width: 500px;height: 102px; overflow: hidden;border: #4e83c2 solid 1px;margin: 50px auto;}
.content ul { width: 200%; height:100px; margin:0px auto; padding:0px; float:left; list-style:none }
.content ul li { float: left; width: 100px;height: 100px;border: #ccc solid 1px;}
</style>
</head>
<body>
<!--测试的时候可以改变li的宽度和li的个数-->
<div class="content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<!--<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>>-->
</ul>
</div>
<script type="text/ecmascript">
var num = 0; //变量
var startORstop; //滚动对象
var width; //内容的其中一个宽度
var speed = 10; //滚动速度：越大越慢
$(document).ready(function () {
var content_width = $(".content").width(); //容器宽度
var total_width = 0; //内容宽度
width = $(".content ul li").width();
$(".content ul li").each(function () {
total_width += $(this).width();
});
if (total_width > content_width) {
if (total_width - content_width > width - 1) {
setTimeout(start, 1000);
} else {
$(".content ul li").clone().appendTo($(".content ul"));
setTimeout(start, 1000); //延迟1s之后执行,毕竟刷新页面就已经滚动,还没看清楚前面的几个就要被放到后面
}
} else {
clearInterval(startORstop);
}
$(".content ul li").mouseover(function () { //鼠标移上去停止滚动
clearInterval(startORstop);
}).mouseout(function () { //鼠标离开继续滚动
startORstop = setInterval(scroll, speed);
})
})
function start() { //延迟执行之后运行开始方法
startORstop = setInterval(scroll, speed);
}
function scroll() { //滚动方法
num++;
if (num > width) {
num = 0;
$(".content ul li").first().appendTo($(".content ul"));
}
$(".content ul").css("margin-left", -num + "px");
}
</script>
</body>
</html>