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

时间 2019-12-06

原文原文链接

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

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

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

<body>        
    <div style="float: left;width: 15%;">
        <span onclick="left()">上一张</span>
    </div>
    <div style="float: left;width: 60%;height: 450px;" onmouseover="stop()" onmouseout="start()">
        <img  style="width: 500px;height: 450px;" src="img/1.jpg" />
    </div>            
    <div>
        <span onclick="right()">下一张</span>
    </div>
</body>

JavaScript代码segmentfault

/*
 * 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渣呢，不说了去进修先~~~数组