轮播

轮播

好几天木有写博客了,木有网啊我们这个地方,只能凑点网写今天我们写一下轮播把

思路1:获取节点

　　获取左右箭头

　　打印图片中的class

　　打印数字里面的class

　　图片轮播,在这之前设置一个全局变量m

　　找到图片节点,两个值不一样,前一个是要隐藏的后一个是要显示的

　　给div添加移入移出事件

　　移入左右箭头显示

　　移除隐藏

　　给每个数字一个点击事件

　　左右箭头添加点击事件实现图片切换

下面我们来看代码

html代码

<div id="lun">
        <ul>
            <li class="active"><img src="./imgs/1.jpg" alt=""></li>
            <li><img src="./imgs/2.jpg" alt=""></li>
            <li><img src="./imgs/3.jpg" alt=""></li>
            <li><img src="./imgs/4.jpg" alt=""></li>
            <li><img src="./imgs/5.jpg" alt=""></li>
            <li><img src="./imgs/6.jpg" alt=""></li>
        </ul>
        <div id="num_list">
            <ul>
                <li><span class="active_num">1</span></li>
                <li><span >2</span></li>
                <li><span>3</span></li>
                <li><span>4</span></li>
                <li><span>5</span></li>
                <li><span>6</span></li>
            </ul>
        </div>

        <!-- 向左的箭头 -->
        <div id="left">&lt;</div>
        <!-- 向右的箭头 -->
        <div id="right">&gt;</div>
    </div>

css代码

    <style>
        *{margin:0px;padding:0px;list-style:none;}
        #lun{width:730px;height:454px;margin:0 auto;margin-top:20px;position:relative;}
        #lun>ul>li{display: none;}
        #lun ul .active{display: block;}
        #lun #num_list{width:100%;height:30px;position:absolute;bottom:0px;opacity: 0.5}
        #lun #num_list ul{margin-left:290px;}
        #lun #num_list li{float:left;height:30px;line-height:30px;}
        #lun #num_list li span{width:20px;height:20px;color:white;text-align:center;line-height:20px;border-radius: 50%;display: block;background: black;margin-top:5px;margin-right: 5px}
        #lun #num_list li .active_num{background:#c81623;}
        #left,#right{width:26px;height:68px;background: black;color:white;text-align:center;font-size:60px;line-height:68px;opacity: 0.3;position: absolute;display:none;}
        #left{top:193px;}
        #right{top:193px;right:0px;}
    </style>

js代码

var lun=document.getElementById("lun");
var list=lun.children[0].children;
var numlist=document.getElementById("num_list").children[0].children;
//获取左右箭头
var left = document.getElementById('left');
        var right = document.getElementById('right');

        //打印的是图片中的class
        // console.log(list[0]);
        // //打印数字中的class
        // console.log(numlist[0].firstElementChild);
        var time = null;
        var m=0;//这里的m非常重要后面都会用到 全局变量 
        //1 图片轮播
        function autoRun(){
            time = setInterval(function (){
                // console.log(list[m]);
                // 两个m值不一样 前一个是要被隐藏的 后一个是要被显示
                // console.log("************");
                // console.log(m);
                
                list[m].removeAttribute("class");
                numlist[m].firstElementChild.removeAttribute("class");
                m++;
                if(m>5){
                    m=0;
                }

                // console.log(m);
                // console.log("************");

                list[m].className = "active";
                numlist[m].firstElementChild.className = "active_num";
            },1000);
        }

        //使用函数autoRun();
        autoRun();

        //2 div盒子添加移入移出事件
        lun.onmouseover = function (){
            clearInterval(time);
            left.style.display = "block";
            right.style.display = "block";
            this.style.cursor = "pointer";
        }

        lun.onmouseout = function (){
            autoRun();    
            left.style.display = "none";
            right.style.display = "none";
            this.style.cursor = "default";
        }

        //3 给每个数字点击事件
        for(var i=0;i<numlist.length;i++){
            numlist[i].onclick = function(){
                // alert(123);

                //轮播的m值消失,点击的m值显示
                // 第一个m是在轮播的值 
                list[m].removeAttribute("class");
                numlist[m].firstElementChild.removeAttribute("class");
                // console.log("===========");
                // console.log(m);

                //第二个m是我点击的值 
                m = this.firstElementChild.innerHTML-1;
                list[m].className = "active";
                numlist[m].firstElementChild.className = "active_num";

                // console.log(m);
                // console.log("===========");
                
                // this.firstElementChild.className = "active_num";
            }
        }

        //4 左右箭头添加点击事件
        left.onclick = function(){
            list[m].removeAttribute("class");
            numlist[m].firstElementChild.removeAttribute("class");

            m--;
            if(m<0){
                m=5;
            }
            list[m].className = "active";
            numlist[m].firstElementChild.className = "active_num";

        }
        
        right.onclick = function(){
            list[m].removeAttribute("class");
            numlist[m].firstElementChild.removeAttribute("class");

            m++;
            if(m>5){
                m=0;
            }
            list[m].className = "active";
            numlist[m].firstElementChild.className = "active_num";

        }