<html>
<body>
<div class="box">
<ul class="scroll">
<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>
</ul>
</div>
<script src="https://api.ruiyingdg.com/public/static/tool/jquery1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
//obj 绑定对象
//direction 滚动方向
//speed 滚动速度 0~100
var scroll = function(param){
//滚动内容宽高
var sh = $(param.obj).find('.scroll').height();
var sw = $(param.obj).find('.scroll').width();
//视图宽度
var boxW = $(param.obj).width();
//css
//垂直方向滚动
if(param.direction == 'row'){
$(param.obj).css({
'position':'relative',
'overflow':'hidden',
});
$(param.obj).find('.scroll').css({
'overflow':'hidden'
});
$(param.obj).find('.scroll li').css({
'float':'left'
});
//获取所有横向滚动子无素宽度
ew = 0;
$(param.obj).find('.scroll li').each(function(){
ew += $(this).width();
});
$(param.obj).find('.scroll').css({
'position':'relative',
'left':'0px',
'top':'0px',
'width':ew*2+'px',
});
}else{
$(param.obj).css({
position:'relative',
overflow:'hidden',
height:sh+'px',
});
$(param.obj).find('.scroll').css({
position:'absolute',
left:'0px',
top:'0px'
});
}
//复制一分代码
var copy = $(param.obj).find('.scroll').html();
$(param.obj).find('.scroll').append(copy);
//动态修改滚动位置
var num = 0;
function move() {
if(param.direction == 'row'){
//横向
if (num == ew*-1) {num = 0;}
num -= 1;
$(".scroll").css({left: num});
}else{
//垂直
if (num == sh*-1) {num = 0;}
num -= 1;
$(".scroll").css({top: num});
}
}
//设置滚动速度20
var timer = setInterval(move, 100-param.speed*1);
//设置鼠标经过时滚动停止
$(param.obj).find('.scroll').hover(
function() {
clearInterval(timer);
},
function() {
timer = setInterval(move, 100-param.speed*1);
});
}
scroll({
obj:'.box',
direction:'row',
speed:100,
});
});
</script>
</body>
</html>