小白的轮播图作业

这是作为小白的第一份作业，纪念一下子~~
下图为轮播图实现效果：

HTML代码块：
（首先五张图片我给编号1-5,style属性所在定位的层中有效果，定位距左侧为0；五个按钮同样标号1-5；用a标签来调用一函数，来实现左右翻页并显示相应的图标）

<!-- 以下是滚动图 -->
	   <div class="container">
              <div class="wrap" style="left: 0px;">
           				<img src="images\g1.jpg" alt="1">
            		    <img src="images\g2.jpg" alt="2">
            			<img src="images\g3.jpg" alt="3">
            			<img src="images\g4.jpg" alt="4">
            			<img src="images\g5.jpg" alt="5">
        		</div>
        		<div class="buttons">
            			<span class="on">1</span>
            			<span>2</span>
            	    	<span>3</span>
            			<span>4</span>
            			<span>5</span>
        		</div>
		       <a href="javascript:;" class="arrow arrow_left">&lt;</a>
       	     <a href="javascript:;" class="arrow arrow_right">&gt;</a>
  		</div>

js代码块：
（运用js来实现主要功能，包括左右翻页，按钮翻页，自动轮播，鼠标悬停暂停）

<script>
 var wrap = document.querySelector(".wrap");
        var next = document.querySelector(".arrow_right");
        var prev = document.querySelector(".arrow_left");
        next.onclick = function () {
            next_pic();
        }<!-- 当鼠标点击下一张时，调用 next_pic函数 -->
        prev.onclick = function () {
            prev_pic();
        }
        function next_pic () {
            index++;
            if(index > 4){
                index = 0;
            }<!-- index在下方设为0，相当于图片下标，当点击下一张时index加一 -->
            showCurrentDot();
            var newLeft;
            if(wrap.style.left === "-2400px"){
                newLeft = 0;
            }else{
                newLeft = parseInt(wrap.style.left)-600;
            }
            wrap.style.left = newLeft + "px";
        }<!-- 当wrap.style.left 为-2400时当前图片为第五张，若在下一张则为第一张将newleft设为0实现轮播，若不为第五张则-600px实现下一张图片播放-->
        function prev_pic () {
            index--;
            if(index < 0){
                index = 4;
            }
            showCurrentDot();
            var newLeft;
            if(wrap.style.left === "0px"){
                newLeft = -2400;
            }else{
                newLeft = parseInt(wrap.style.left)+600;
            }
            wrap.style.left = newLeft + "px";
        }
        var timer = null;
        function autoPlay () {
            timer = setInterval(function () {
                next_pic();
            },2000);
        }<!-- 该定时器实现每两秒播放下一张的轮播效果-->
        autoPlay();

        var container = document.querySelector(".container");
        container.onmouseenter = function () {
            clearInterval(timer);
        }<!-- 当鼠标放上时清除定时器效果，图片实现暂停-->
        container.onmouseleave = function () {
            autoPlay();    
        }<!-- 当当鼠标移走继续实现轮播 -->

        var index = 0;
        var dots = document.getElementsByTagName("span");
        function showCurrentDot () {
            for(var i = 0, len = dots.length; i < len; i++){
                dots[i].className = "";
            }
            dots[index].className = "on";
        }

        for (var i = 0, len = dots.length; i < len; i++){
            (function(i){
                dots[i].onclick = function () {
                    var dis = index - i;
                    wrap.style.left = (parseInt(wrap.style.left) +  dis * 600)+"px";
                    index = i;
                    showCurrentDot();
                }
            })(i);            
        }<!-- 此函数用来改变当前播放图片对应的小按钮颜色，并运用for循环来显示该按钮对应的图片，用dis求出需要改变的像素，从而实现改变图片 -->
</script>

CSS代码块：

.container {
            position: relative;<!-- 绝对定位，以此子级确定自己位置 -->
            width: 600px;
            height: 400px;
            margin:100px auto 0 auto;
            box-shadow: 0 0 5px green;<!-- 边框绿影，美观作用-->
            overflow: hidden;<!-- 超出部分隐藏，只显示一张 -->
        }
        .container .wrap {
            position: absolute;
            width: 3000px;
            height: 400px;
            z-index: 1;<!-- z坐标轴的位置来确定所处层级-->
        }
        .container .wrap img {
            float: left;
            width: 600px;
            height: 400px;
        }
        .container .buttons {
            position: absolute;
            right: 5px;
            bottom:40px;
            width: 150px;
            height: 10px;
            z-index: 2;
        }
        .container .buttons span {
            margin-left: 5px;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: green;
            text-align: center;
            color:white;
            cursor: pointer;<!-- 当鼠标放上时改变鼠标的形状 -->
        }
        .container .buttons span.on{
            background-color: red;
        }
        .container .arrow {
            position: absolute;
            top: 35%;
            color: green;
            padding:0px 14px;
            border-radius: 50%;
            font-size: 50px;
            z-index: 2;
            display: none;
        }
        .container .arrow_left {
            left: 10px;
        }
        .container .arrow_right {
            right: 10px;
        }
        .container:hover .arrow {
            display: block;
        }
        .container .arrow:hover {
            background-color: rgba(0,0,0,0.2);
        }<!-- 透明度设置 -->