这年头，哪个app，哪个小程序没个轮播图呢，并且鸭，哪个ui框架不给你提供呢是吧。

1. 使用定时器定时切换图片轮播效果

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

            
    
        
     上一张    
    
    
    
        
         
    
                
    
        
     下一张    
    

JavaScript代码

/* * 1.使用定时器定时切换图片轮播效果 * 2.鼠标停留在图片上时停止切换图片，离开后继续切换图片 * 3.图片点击上一张下一张时自动切换，并自我进行判断是否为第一张或最后一张。 *   当图片为第一张时，点击上一张到最后一张图片，当图片为最后一张时，点击下一张到第一张。 *  * onmouseover 事件会在鼠标指针移动到指定的对象上时发生。 * onmouseout 事件会在鼠标指针移出指定的对象时发生。 * */// 将所有图片url放入一个数组，将index的值设置为0var 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的domfunction 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);

噢对了，这次滴文章参考了这位大大的，嘻嘻该承认还是得承认，谁让我还是一个孩子呢