用JS实现图片轮播，并控制播放和停止

准备若干图片，网页中放置一个Div，内部放置播放按钮和停止按钮，还有图片对应的li标签

   <div id="imgDiv">
        <div id="buttonDiv">
            <input type="button" value="▶" style="font-size:14px"  onclick="play()"/>
            <input type="button" value="■" style="font-size:16px" onclick="stop()"/>
        </div>
        <ul id="ulList">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>

通过css样式控制按钮和标签的位置（相对定位）

    <style type="text/css">
        #imgDiv {
            margin:5px auto;
            border:1px solid #808080;
            width:600px;
            height:375px;
            background-image:url("/img/01.jpg");
        }

        #buttonDiv {
            position:relative;
            top:350px;
            left:0px;
        }

        #ulList {
            position:relative;/*相对定位*/
            list-style:none;/*去掉li标签前面的点*/
            left:374px;
            top:305px;
        }
            #ulList li {
                float:left;
                border-left:1px solid #808080;
                background-color:yellow;
                color:black;
                width:30px;
                height:30px;
                text-align:center;
                line-height:30px;
            }
    </style>

添加对应的js控制代码，实现原理为点击对应的li标签，div的背景图片更改，然后用定时器定时触发li标签的onclick事件，来实现图片轮播的效果。

    <script type="text/javascript">
        //创建一个数组存储图片 01.jpg~06.jpg
        var arrImg = new Array(6);
        for (var i = 0; i < arrImg.length; i++) {
            arrImg[i] = "/img/0" + (i+1) + ".jpg";
        }
        //设置全局变量纪录当前li标签对应的图片索引
        var curLiIndex = 0;
        //设置全局变量纪录定时器句柄
        var iTimer = 0;
        //设置全局变量保存li标签元素数组
        var liObjs;
        //设置全局变量保存定时器的启动状态
        var isPlay = false;
        //在页面元素加载完成后执行
        window.onload = function () {
            //页面加载完成后才能获得dom元素
            var divObj = document.getElementById("imgDiv");
            liObjs = document.getElementsByTagName("li");
            //为每个li标签设置点击事件，先重置所有li标签的背景色，再设置当前li标签颜色，改变div的背景
            for (var i = 0; i < liObjs.length; i++) {
                liObjs[i].onclick = function () {
                    resetLiBackColor();
                    this.style.backgroundColor = "red";
                    //获得当前li标签对应的图片索引
                    curLiIndex = parseInt(this.innerText)-1;
                    divObj.style.backgroundImage = "url(" + arrImg[curLiIndex] + ")";
                }
            }

            //重置li标签的背景颜色
            function resetLiBackColor()
            {
                for (var i = 0; i < liObjs.length; i++) {
                    liObjs[i].style.backgroundColor = "yellow";
                }
            }

            //启动轮播
            play();
        }

        //手动调用li标签的onclick事件，同时纪录下一个点击索引
        function liClick() {
            liObjs[curLiIndex].onclick();
            curLiIndex++;
            curLiIndex = curLiIndex >= 6 ? 0 : curLiIndex;
        }

        //当播放状态为否的时候开启轮播，如果没有状态判断，反复点击，则轮播速度越来越快
        function play() {
            if (!isPlay)
            {
                iTimer = setInterval(liClick, 1000);
            }
            isPlay = true;
        }

        //当播放状态为真时停止轮播，开启和停止轮播函数不能写在window.onload函数内，否则按钮无法调用方法
        function stop() {
            if (isPlay)
            {
                clearInterval(iTimer);
            }
            isPlay = false;
        }
    </script>

最终实现效果如图所示：