使用纯html和JavaScript实现焦点轮播图特效,本来之前用setInterval()函数写的一个简单的循环轮播图,但是出现了两个问题:
 
1. 当网页被切换时,也就是网页失去焦点时,计时器函数还在进行,但是图片轮播特效没有执行,当网页被切回来,重新获得焦点时,轮播图就会将之前累积的动画缓存一次性执行。结果轮播图就以飞快的速度进行循环,然后就是空白页面,整个轮播图区域的顺序完全混乱。
 
2. 当快速点击next或pre按钮时,当前图片的动画还没完成就开始下一张图片的动画,轮播图的速度和顺序也会完全混乱,最后变成空白页面。
 
为了解决这两个问题我在网上搜了许多相关的资料,有人提到用window.onblur()和window.onfocus()来控制当网页失去焦点时清除计时器,网页重新获得焦点再声明一个新的计时器。但是可能是我写的代码问题吧,如果这样写的话原先设置的鼠标移入移出事件就不起作用了,点击按钮时图片的切换会和轮播图的自动切换产生冲突。
 
然后继续在网上找有没有解决办法,后来看到其他人用setTimeOut()函数写的轮播图效果,于是重新写了一下代码部分,并且加入一个判断当前图片切换动画是否完成的变量,让轮播图只有当前一个动画完成时才能触发后一张图片的切换动画。加入这个判断条件后,网页失去焦点时也不会有动画累计了,就算网页切换也不会产生顺序混乱的问题。
 
具体代码如下:
 var pic=document.getElementById("pic1");
var next=document.getElementById("next");
var pre=document.getElementById("pre");
var ad = document.getElementById("ad1");
var cirBtns=ad.getElementsByTagName("span"); var index=1;
var animated=false; pre.onclick=function () {
if (index===1){
index=3;
} else{
index-=1;
}
if (!animated){
animate(1000);
}
showBtns();
} next.onclick=function () {
if (index===3){
index=1;
} else{
index+=1;
}
if (!animated){
animate(-1000);
}
showBtns();
} function animate(offset) {
animated=true;
var newLeft=pic.offsetLeft+offset;
var time=300;
var interval=5;
var speed=offset/(time/interval); function go() {
if((speed<0 && pic.offsetLeft>newLeft)||(speed>0 && pic.offsetLeft<newLeft)){
pic.style.left=pic.offsetLeft+speed+"px";
setTimeout(go,interval);
} else {
animated=false;
pic.style.left=newLeft+"px";
if (newLeft <= -4000) {
pic.style.left = "-1000px";
} else if (newLeft >= 0) {
pic.style.left = "-3000px"
}
}
}
go();
} function showBtns() {
for(var i=0;i<cirBtns.length;i++){
var button=cirBtns[i];
if(button.className === "on"){
button.className="";
break;
}
}
cirBtns[index-1].className="on";
} for(var i=0;i<cirBtns.length;i++){
var button=cirBtns[i];
button.onclick=function () {
if(this.className==="on"){
return;
}
var myIndex=parseInt(this.getAttribute("index"));
var offset=-1000*(myIndex-index);
if(!animated){
animate(offset);
}
index=myIndex;
showBtns();
}
} var autoTimer;
function autoPlay() {
autoTimer=setInterval(function () { next.onclick(); },3000);
}
function autoStop() { clearInterval(autoTimer); }
ad.onmouseover=autoStop;
ad.onmouseout=autoPlay; autoPlay();

【20190123】JavaScript-轮播图特效中出现的问题的更多相关文章

  1. 【JavaScript】固定布局轮播图特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 2、原生js实现轮播图特效

    很多很多网站经常会用到一个特效,那就是轮播图,对于日新月异的前端技术来说其实就是一个框架一个接口的事,但轮播的原理是什么?用最原始的javascript来写又是怎样的呢?本人是一枚菜鸟,这篇文章就当做 ...

  3. 练习:javascript轮播图效果

    javascript轮播自动播放切换滑过停止,上一页/下一页 <!DOCTYPE html> <html lang="en"> <head> & ...

  4. 【jQuery】百分比自适应屏幕轮播图特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. JavaScript 轮播图

    这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊 布局什么的你们自己搞定吧 <div class="slider" id="circl ...

  6. JavaScript轮播图

    需求: 鼠标移动到下标页码时,也转换到相对应的图片: 多张图片可以自动轮播: 鼠标移动至图片时,停止自动轮播: 可以手动左右调节: <!DOCTYPE html> <html lan ...

  7. JS实现轮播图特效(带二级导航)

    按照国际惯例先放效果图 index.html <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. 超详细的原生JavaScript轮播图(幻灯片)的制作

    本次轮播图的制作主要分为3个部分,分别是:设置定时器自动轮播:点击左右切换按钮轮播:下方点击按钮轮播.具体实现步骤如下: (效果图) html部分代码如下: <div class="s ...

  9. jQuery插件slides实现无缝轮播图特效

    初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...

随机推荐

  1. 方向导数,梯度和梯度下降之BGD,SGD

    方向导数和梯度的直观理解,from知乎-马同学: https://www.zhihu.com/question/36301367 BGD,SGD: https://www.cnblogs.com/gu ...

  2. Android ------------------ 带边框的圆角矩形

    <?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http:/ ...

  3. Jira/Confluence的备份、恢复和迁移

    之前的文章已经分别详细介绍了Jira.Confluence的安装及二者账号对接的操作方法,下面简单说下二者的备份.恢复和迁移: 一.Jira.Confluence的备份.恢复1)Confluence的 ...

  4. GitHub 轻松提速教程

    通过修改hosts文件来提速,获取github的IP地址 访问:https://www.ipaddress.com/ 网址 依次获取以下三个网址的IP github.com github.global ...

  5. 如何在 SCSS 使用 JavaScript 变量/scss全局变量

    Update2019/3/6:发现一个更好的方法,预处理器加载一个全局设置文件 官方github给出了详细的配置. 在 SCSS 中使用变量很方便,创建一个 variables.scss 文件,里面声 ...

  6. css 设计规范

    外部 div 设置 margin 和 padding: 内部每个元素只设计跟自己相关的属性,这样方便复用:

  7. 人脸检测----Adaboost学习方法

    有了haar特征,有了提升性能的积分图,是不是已经可以很好的解决人脸检测问题了?答案是:no. 因为,计算每一个特征值的时候速度都大幅提升了,但是,一个小小的24*24是人脸图像根据不同的位置, 以及 ...

  8. DefaultServlet

    在web访问任何资源都是在访问Servlet 当你启动Tomcat,你在网址上输入http://localhost:8080.为什么会出现Tomcat小猫的页面? 这是由缺省Servlet为你服务的! ...

  9. 1 认识Jquery

    一 代码风格和变量风格 1 链式操作风格 : (1)对同一对象不超三个操作的可以写在一行 (2)对于同一个对象的较多操作,建议每行写一个操作 (3)对于多个对象的少量操作,可以每个对象写一行,涉及子元 ...

  10. nohup后台执行

    由于使用nohup时,会自动将输出写入nohup.out文件中,如果文件很大的话,nohup.out就会不停的增大,这是我们不希望看到的,因此,可以利用/dev/null来解决这个问题. nohup ...