html、js轮播图怎么阻止快速、多次点击造成的混乱 8
<!doctypehtml><html><head><metacharset="utf-8"><title>幻灯片</title></head><style>#banne...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>幻灯片</title>
</head>
<style>
#banner-wpar{
width:520px;
height:280px;
border:1px solid blue;
overflow:hidden;
margin:0 auto;
position:relative;
}
.conter-width{
width:5000px;
position:relative;
left:-524px;
}
.banner-nav-left{
position:absolute;
top:120px;
left:0;
}
.banner-nav-rig{
position:absolute;
top:120px;
left:496px;
}
#banner-wpar ul{
position:absolute;
top:210px;
left:150px;
float:left;
list-style: none;
}
#banner-wpar ul li{
width:20px;
height:20px;
background:#fff;
float:left;
margin:17px;
border-radius: 50%;
}
#banner-wpar .active{
background:red;
}
</style>
<body>
<div id="banner-wpar">
<div class="conter-width">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
</div>
<img class="banner-nav-left" src="left.png">
<img class="banner-nav-rig" src="rig.png">
<ul class="circle">
<li class ="active"></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
html css3 部分
js部分太长不给发
轮播图
如点击左侧按钮的时候，图片由左往右过渡到第二张（有过渡动画的加了conter_width.style.transition = 'all 1s';）再点击就过渡到第三张 ，再点击也是又左往右回第一张。 但是‘快速点击’的时候，第三张要过渡到第一张时就是由右往左走回第一张，我应该怎么处理才能避免‘快速点击’而发生第三张要过渡到第一张时就是由右往左走的错乱呢。 展开
<html>
<head>
<meta charset="utf-8">
<title>幻灯片</title>
</head>
<style>
#banner-wpar{
width:520px;
height:280px;
border:1px solid blue;
overflow:hidden;
margin:0 auto;
position:relative;
}
.conter-width{
width:5000px;
position:relative;
left:-524px;
}
.banner-nav-left{
position:absolute;
top:120px;
left:0;
}
.banner-nav-rig{
position:absolute;
top:120px;
left:496px;
}
#banner-wpar ul{
position:absolute;
top:210px;
left:150px;
float:left;
list-style: none;
}
#banner-wpar ul li{
width:20px;
height:20px;
background:#fff;
float:left;
margin:17px;
border-radius: 50%;
}
#banner-wpar .active{
background:red;
}
</style>
<body>
<div id="banner-wpar">
<div class="conter-width">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
</div>
<img class="banner-nav-left" src="left.png">
<img class="banner-nav-rig" src="rig.png">
<ul class="circle">
<li class ="active"></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
html css3 部分
js部分太长不给发
轮播图
如点击左侧按钮的时候，图片由左往右过渡到第二张（有过渡动画的加了conter_width.style.transition = 'all 1s';）再点击就过渡到第三张 ，再点击也是又左往右回第一张。 但是‘快速点击’的时候，第三张要过渡到第一张时就是由右往左走回第一张，我应该怎么处理才能避免‘快速点击’而发生第三张要过渡到第一张时就是由右往左走的错乱呢。 展开
2个回答
展开全部
古老的做法是用settimeout或者setinterval实现循环动画，但是这样就会造成题主说的，在且页面的时候会造成混乱。
因为当页面失去焦点时浏览器不再渲染页面，但是settimeout/setinterval的请求不会停止，队列会一直堆积动画，当页面再次获得焦点时动画队列早已堆积了大量命令，就会导致动画混乱。
现在的做法，笼统地说，是使用requestanimationframe函数，用法和settimeout/setinterval类似，只不过requestanimationframe不接受时间参数,函数的执行频率由浏览器的渲染帧数决定，这就实现了由浏览器决定动画队列，避免了动画混乱。当然也可以使用一些现成的轮播图插件，题主可以自己百度，这里对比举例说明一下settimeout和requestanimationframe的用法。
//用setTimeout实现在控制台循环输出hello world
function fun(){
console.log('hello world');
setTimeout(function(){
fun();
},3000);
}
fun();//执行fun函数，就可以每隔3000毫秒递归的输出hello world
//用reqestanimationframe实现在控制台循环输出hello world
function fun(){
console.log('hello world');
requestAnimationFrame(function(){
fun();
})
}
fun()//执行fun函数，就可以每隔3000毫秒递归的输出hello world
//requestAnimationFrame没有时间参数，所以直接使用不能控制间隔
//但我们可以人为的限制执行间隔，方法如下
function fun(last_time){
if(new Date().getTime() - last_time > 3000){
console.log('hello world');
requestAnimationFrame(function(){
fun(new Date().getTime());
})
}else{
requestAnimationFrame(function(){
fun(last_time)
});
}
}
fun(new Date().getTime())
//这样就可以为requestAnimationFrame设置间隔，实现每隔3000毫秒输出hello world
//抱歉我主写c副写python偶尔写javaweb,分号用的有些乱。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
