原生JavaScript轮播效果，噢，其实什么才叫原生

pkhope 发布于2019-08-23 14:02 / 1394人阅读

摘要：结构毫无美感的，毕竟就一个嘛上一张下一张代码使用定时器定时切换图片轮播效果鼠标停留在图片上时停止切换图片，离开后继续切换图片图片点击上一张下一张时自动切换，并自我进行判断是否为第一张或最后一张。

这年头，哪个app，哪个小程序没个轮播图呢，并且鸭，哪个ui框架不给你提供呢是吧。
但是懂写原生轮播图是不是也很装逼呀嘻嘻。so，我们还是先得理解轮播图的技术要点是什么吧

1. 使用定时器定时切换图片轮播效果
2. 鼠标停留在图片上时停止切换图片，离开后继续切换图片
3. 图片点击上一张下一张时自动切换，并自我进行判断是否为第一张或最后一张。
当图片为第一张时，点击上一张到最后一张图片，当图片为最后一张时，点击下一张到第一张。

HTML结构（毫无美感的html，毕竟就一个demo嘛）

JavaScript代码

/*
 * 1.使用定时器定时切换图片轮播效果
 * 2.鼠标停留在图片上时停止切换图片，离开后继续切换图片
 * 3.图片点击上一张下一张时自动切换，并自我进行判断是否为第一张或最后一张。
 *   当图片为第一张时，点击上一张到最后一张图片，当图片为最后一张时，点击下一张到第一张。
 * 
 * onmouseover 事件会在鼠标指针移动到指定的对象上时发生。
 * onmouseout 事件会在鼠标指针移出指定的对象时发生。
 * */

// 将所有图片url放入一个数组，将index的值设置为0
var imgs = ["img/1.jpg", "img/2.jpg", "img/3.jpg"];
var index = 0;
var stopValue = 0;
var startValue = 0;
var img = document.getElementsByTagName("img")[0]; // 获取img的dom
function carousel() { // 切换图片        
    if (index < imgs.length-1) {
        index++;
        img.setAttribute("src", imgs[index]);
    } else{
        index = 0;
        img.setAttribute("src", imgs[index]);
    }
}
/*
 * 定义两个全局变量stopValue 和startValue 为0，
 * onmouseover和onmouseout从进入对应的元素范围到离开对应的元素范围会执行很多次，
 * 通过两个全局全局变量，让它不管在对应的元素范围内如何移动都只执行一次，
 * 避免setInterval时间出错。
 * */
function stop(){ // 进入图片时停止轮播
    stopValue+=1;
    if (stopValue < 2) {
        clear();
        startValue = 0;
    }
}
function start(){ // 离开图片时继续轮播
    startValue+=1;
    if (startValue < 2) {
        setInt();
        stopValue = 0;
    }
}
function clear(){ // 清除定时器
    clearInterval(int);
}
function setInt(){ // 重新执行定时器
    int = setInterval("carousel()", 3000);
}
/*
 * 在切换图片时也调用了shop()和start()方法
 * 目的时为了解除在轮播过程中，在即将切换图片时，手动切换图片了却又立马进入到下一张图片
 * */
function left(){ // 上一张切换图片
    stop();
    if (index > 0) {
        index -= 1;
        img.setAttribute("src", imgs[index]);
    } else{
        index = imgs.length-1;
        img.setAttribute("src", imgs[index]);
    }
    start();
}
function right(){ // 下一张切换图片
    stop();
    if (index < imgs.length-1) {
        index +=1;
        img.setAttribute("src", imgs[index]);
    } else{
        index = 0;
        img.setAttribute("src", imgs[index]);
    }
    start();
}
var int = setInterval("carousel()", 3000);

噢对了，这次滴文章参考了这位大大的文章，嘻嘻该承认还是得承认，谁让我还是一个孩子呢
貌似这距离实用的轮播效果不远了呀，但肯定还有很多缺点，望大家指出~~~
我滴妈呀，可能加个css过渡效果可能会顺眼很多，可谁让我css渣呢，不说了去进修先~~~

云服务器 GPU云服务器原生JS实现轮播原生js横向轮播旋转原生js效果原生javascript

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99976.html

手把手教你用原生JavaScript造轮子（2）——轮播图（更新：ES6版本）

摘要：绑定轮播事件然后是鼠标移入移出事件的绑定鼠标移入移出事件移入时停止轮播播放的定时器，移出后自动开始下一张的播放。通过上一篇文章的学习，我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图，希望能进一步加深大家对于面向对象插件开发的理解和认识。 So, Lets begin! 目前项目使用 ES5及UMD 规范封装，所以在前端暂时只支持标签的引入方式...

jasperyang 2019-08-23 10:57 评论0 收藏0
回顾自己三次失败的面试经历

摘要：站在这个时间点上，我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历，依然是与轮播图有关。当然，这次思特奇面试之旅，最后也是以失败告终，这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言时间的齿轮已经来到了2017年的11月份，距离2018年仅仅还剩下不到两...

DC_er 2019-08-21 17:42 评论0 收藏0
回顾自己三次失败的面试经历

摘要：站在这个时间点上，我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历，依然是与轮播图有关。当然，这次思特奇面试之旅，最后也是以失败告终，这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言时间的齿轮已经来到了2017年的11月份，距离2018年仅仅还剩下不到两...

spacewander 2019-08-29 13:50 评论0 收藏0
授人以渔式解析原生JS写轮播图

摘要：鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，鼠标移开时左右箭头隐藏掉并且自动轮播。核心原理清除定时器，绑定事件，重构下代码封装出往右往左轮播函数和自动轮播函数。需求与分析需求：循环无缝自动轮播五张图，按左右箭头可以手动切换图片，鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来，...

Zack 2019-08-29 16:58 评论0 收藏0