落花流水春去也，天上人间

记录一下自己学js的代码

   <script>

    //从文档获得左右箭头的id

        var arrowLeft = document.getElementById("arrow-left");

        var arrowRight = document.getElementById("arrow-right");

        //获得图像id

        var multiImages = document.getElementById("multi-images");

        //定义一个圆

        var circles = document.getElementById("multi-circles").getElementsByTagName("li");

        //获得Box的id

        var box=document.getElementById("box");

        //为箭头和圆点绑定事件

        arrowLeft.addEventListener("click", preMove);

        arrowRight.addEventListener("click", nextMove);

        var currentIndex=0;

        var preIndex;

        for (var i = 0; i < circles.length; i++) {

                circles[i].setAttribute("id", i);

                circles[i].addEventListener("mouseenter", overCircle);

        }

        //滑过圆点时执行的操作

        function overCircle() {

                preIndex=currentIndex;

                currentIndex = parseInt(this.id);

                moveImage();

                changeCircleColor(preIndex, currentIndex);      

        }

        //单击左箭头后执行的操作

        function preMove() {

                preIndex=currentIndex;

                currentIndex--;

                if (currentIndex < 0) {

                    currentIndex = 4;

                }

                moveImage();

                changeCircleColor(preIndex, currentIndex);

        }

        //单击左箭头后执行的操作

        function nextMove() {

                preIndex=currentIndex;

                currentIndex++;

                if (currentIndex >= 5) {

                    currentIndex = 0;

                }

                moveImage();

                changeCircleColor(preIndex, currentIndex);

        }

        //按箭头后图片移动像素大小

        function moveImage() {

                multiImages.style.left = -currentIndex * 640 + "px";

        }

        function changeCircleColor(preIndex,currentIndex) {

                circles[preIndex].style.color = "rgb(0, 0, 0)";

                circles[currentIndex].style.color = "rgb(255, 0, 0)";

        }

        var timer=setInterval(nextMove,1000);

        box.addEventListener("mouseover",function() {

                clearInterval(timer);//清除定时器

        });

        box.addEventListener("mouseout",function() {

                timer=setInterval(nextMove,1500);

        });

    </script>