轮播图的实现

1.任务要求：

• 每3秒自动切换到下一张，循环播放
• 鼠标靠近图片停止播放，鼠标离开继续播放
• 左右箭头，可手动切换
• 点击右下角小圆点切换到指定的图片

---

2.效果展示

---

3.实现的原理和思路分析

3.1 HTML部分

轮播图片采用<div>下嵌套多个<img>来实现，我的用了4张图片轮播；点击跳转的按钮用<div>下嵌套多个<span>可实现，左右切换箭头用<a>实现，&lt; 表示小于号，展现左箭头的效果，同理&gt;表示大于号，展现右箭头的效果。

    <div id ="container" >
        <!--轮播图片-->
        <div id="wrap" style="left:0px">
            <img src="./images/11.jpg" alt=""/>
            <img src="./images/22.jpg" alt=""/>
            <img src="./images/33.jpg" alt=""/>
            <img src="./images/44.jpg" alt=""/>
        </div>
        <!--跳转按钮-->
        <div id="dots">
            <span class="on">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
        <!--左右箭头-->
        <a href="javascript:;" class="arrow arrow_left">&lt; </a>
        <a href="javascript:;" class="arrow arrow_right">&gt;</a>
    </div>

 3.2 CSS代码

   <style>


        *{
            padding: 0px;
            margin: 0px;
            text-decoration: none;/*清除所有下划线*/
        }

        #container {
            position: relative;
            width: 500px;/*整个容器div框与图片的长和宽都设置为相同*/
            height: 309px;
            margin: 50px auto;
            padding: 0px;
          /*  background-color: #FF5A20;*/
            overflow: hidden;/*超出隐藏*/
        }
        #wrap {
            position: absolute;
            width: 2000px;/*   照片数目*宽度=4*500  */
            height: 309px;
            z-index: 1;/*设置堆叠显示顺序，图片框在最下面*/

        }

        #wrap img{
            float: left;
            width: 500px;
            height: 309px;

        }
        #dots{
            position: absolute;/*只能用绝对显示这里*/
            right: 40px;
            bottom: 20px;
            width: 100px;
            height: 10px;
            z-index: 2;/*设置按钮在图片上方*/
        }
        #dots span{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #dddddd;
            color: green;
            text-align: center;
            cursor: pointer;/*鼠标靠近时，光标变为小手*/

        }
        #dots span.on{
            background-color: red;/*高亮显示当前播放的图片*/
        }
        #container .arrow {
            position: absolute;
            top: 35%;
            color: green;
            padding:0px 8px;
            width: 30px;
            height: 90px;
            /*border-radius: 50%;*/
            font-size: 50px;
            z-index: 2;
            display: block;
        }

        #container .arrow_left{
            left: 5px;
        }

        #container .arrow_right{
            right: 5px;
        }

        #container:hover .arrow{
            display: block;
        }

        #container .arrow:hover{
            background-color: rgba(0,0,0,0.2)/*透明度*/
        }

    </style>

3.3 JS代码

 移动的原理是：改变图片框<div id="wrap" style="left:0px">的left坐标，left=0时图片框和第一张图片对齐，之后left左移，展示的效果就是图片在右移，left和图片的映射关系是{left:Index}=[0:0;-500*1:1,-500*2:2,-500*3:3]。

    <script>
        var timer = null;/*初始化定时器*/
        var index=0;/*当前显示图片的下标*/
        var INum;/*用户选择显示的图片下标*/
        Autoplay();
        /*获取CSS选择器指定的属性节点，定义为全局变量*/
        var wrap = document.querySelector("#wrap");
        var Next = document.querySelector(".arrow_right");
        var Prev = document.querySelector(".arrow_left");
        var container = document.querySelector("#container");
        var dots =document.querySelector("#dots").getElementsByTagName("span");
/*
        var wrap = document.getElementById("wrap");
        var Next = document.getElementsByClassName("arrow_right");
        var Prev = document.getElementsByClassName("arrow_left");*/
        //鼠标放入则停止轮播
        container.onmouseenter = function(){
            Stopplay();
        }
        //鼠标离开则开始轮播
        container.onmouseleave = function(){
            Autoplay();
        }
        //点击播放下一张
        Next.onclick = function () {
            Next_pic();
        }
        //点击播放上一张
        Prev.onclick = function () {
            Prev_pic();
        }
        
        //高亮当前显示的图片
        function showCurrentDot() {
            //初始化，所有span的class的值赋值为空，仅使能当前播放图片
            for(var i=0;i<dots.length;i++){
                dots[i].className="";
            }
            dots[index].className="on";
        }

        //点击数字跳转到指定界面
        for(var i=0;i<dots.length;i++) {
            (function (i) {
                    dots[i].onclick = function () {
                        var delta = (index - i);
                        //修正最后一张位移差
                        if(index==3 && parseInt(wrap.style.left)!==-1500){
                            delta = delta -4;
                        }
                        //修正第一张的位移差
                        if(index==0 && parseInt(wrap.style.left)!==0){
                            delta = delta +4;
                        }
                        //跳转到指定的位置   
                        wrap.style.left = parseInt(wrap.style.left) + delta*500 + "px";
                        index = i;
                        showCurrentDot();
                    }
                }
            )(i);
        }


        function Next_pic() {
            index++;
            if(index>3) {
                index=0;
            }
            showCurrentDot();
            var Newleft = parseInt(wrap.style.left)-500;
            if(Newleft==-2000){
                Newleft=0;
            }
            wrap.style.left = Newleft+"px";
        }
        function Prev_pic() {
            index--;
            if(index<0) {index=3;}
            showCurrentDot();
            var Newleft = parseInt(wrap.style.left)+500;
            if(Newleft==500){
                Newleft=-1500;
            }
            wrap.style.left = Newleft+"px";
        }

        function Autoplay() {
                timer = setInterval("Next_pic()",3000);
            }

        function Stopplay() {
            clearInterval(timer);

        }
        
    </script>