使用JavaScript实现图片轮播，上一张后一张，循环播放

轮播图在前端页面中经常用到，包括PC端和移动端。
我所写的轮播图的方法是在页面中设计好一张图片的位置，并且加上按钮“上一张”，“下一张”，“循环播放”，通过修改图片路径，来达到换图片的目的。
步骤：

1. 在webStorm（也可以使用别的开发软件）中，建立html文件，css文件，js文件，img文件；

2. 把需要轮播的图片复制到img文件中，图片名字最好取相似的名字，比如，pic1，pic2，pic3，，这样比较方便。

3. 在html文件和css文件中设计页面格式。

4. 写js代码。

知识补充：
setInterval是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
由setInterval返回的ID值可用作clearInterval方法的参数。

代码如下：

**html代码**：



    
    
    


    

        
        
1/10
        
        
        
    

<script>
        var pic=document.getElementById('pic');
        var count=document.getElementById('count');
        var i=1;
        var timer;
        var flag=true;
        var type=-1;
        function front() {
            if(i==1){
                i=10;
            }else{
                i--;
            }
            pic.src="image/pic"+i+".png";
            count.innerHTML=i+'/10';
        }
        function next() {
            if(i==10){
                i=1;
            }else{
                i++;
            }
            pic.src="image/pic"+i+".png";
            count.innerHTML=i+'/10';
        }
       /* function on() {
            if(flag){
                timer=setInterval(next,1000);
                flag=false;
            }else{
                clearInterval(timer);
                flag=true;
            }
        }*/
        function on() {
            if(type>0){
                clearInterval(type);
                type=-1;
            }else{
                type=setInterval(next,1000);

            }
        }
        
    </script>

*{
    padding: 0;
    margin: 0;
}
.center{
    width: 230px;
    height: 340px;
    margin:20px auto;
}
.center img{
    width: 230px;
    height: 280px;
}
.center #count{
    margin-top: 20px;
    margin-left:45%;
}
input{
    margin-top: 10px;
    margin-left: 20px;
}