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

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

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

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代码

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

图片描述

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

JineWU

引用和评论

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具