html图片无缝滚动鼠标在图片上移动时速度越来越快，求解呀
代码如下，不知道哪里有问题，请问怎么改？#div1{position:relative;width:100%;height:1200px;overflow:hidden;...
代码如下，不知道哪里有问题，请问怎么改？
#div1{
position:relative;width:100%;height:1200px;overflow:hidden;
}
#div2{
position:absolute;
}
li{
float:left;list-style-type:none;padding:0px;
}
img{
width:500px;
height:300px;
border:none;
}
#div2 li a:hover{
position:relative;
</style>
</head>
<body><div id='div1'>
<div id='div2'>
<li><img src="image/jumu1.png" /></li>
<li><img src="image/jumu1.png" /></li>
<li><img src="image/jumu1.png" /></li>
<li><img src="image/jumu1.png" /></li>
</div>
</div>
<script src="../dist/js/swiper.min.js"></script>
<script>
window.onload=function()
{
var odiv2=document.getElementById('div2');
var ali=odiv2.getElementsByTagName('li');
var speed=-1;
var timer=null;
odiv2.innerHTML+=odiv2.innerHTML;
odiv2.style.width=ali[0].offsetWidth*ali.length+'px';
function a(){
timer=setInterval(function()
{
odiv2.style.left=odiv2.offsetLeft+speed+'px';
if (odiv2.offsetLeft<-odiv2.offsetWidth/2)
{
odiv2.style.left='0px';
}
},30);};
odiv2.onmouseout=a;
a();
}
</script> 展开
#div1{
position:relative;width:100%;height:1200px;overflow:hidden;
}
#div2{
position:absolute;
}
li{
float:left;list-style-type:none;padding:0px;
}
img{
width:500px;
height:300px;
border:none;
}
#div2 li a:hover{
position:relative;
</style>
</head>
<body><div id='div1'>
<div id='div2'>
<li><img src="image/jumu1.png" /></li>
<li><img src="image/jumu1.png" /></li>
<li><img src="image/jumu1.png" /></li>
<li><img src="image/jumu1.png" /></li>
</div>
</div>
<script src="../dist/js/swiper.min.js"></script>
<script>
window.onload=function()
{
var odiv2=document.getElementById('div2');
var ali=odiv2.getElementsByTagName('li');
var speed=-1;
var timer=null;
odiv2.innerHTML+=odiv2.innerHTML;
odiv2.style.width=ali[0].offsetWidth*ali.length+'px';
function a(){
timer=setInterval(function()
{
odiv2.style.left=odiv2.offsetLeft+speed+'px';
if (odiv2.offsetLeft<-odiv2.offsetWidth/2)
{
odiv2.style.left='0px';
}
},30);};
odiv2.onmouseout=a;
a();
}
</script> 展开
1个回答
展开全部
鼠标多次悬浮孝迹后巧明并速度越来越快是因为,每悬浮一次就增加了一个setInterval,div2左移动的数度不断的+一个speed,在a函数里加个判断就行了
function a() {
if(!timer){ //如果定时器未定义才设置定时器setInterval
timer = setInterval(function() {
odiv2.style.left = odiv2.offsetLeft + speed + 'px';
if (odiv2.offsetLeft < -odiv2.offsetWidth / 2) {
odiv2.style.left = '0px';
}
}, 30);
}
};这样速度就不会越来越快了槐渗
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
