图片轮播

秃头警告！！终于图片轮播用原生的JS又写出了一遍，真的麻烦

很多都没有封装，后续再说吧

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片轮播</title>
    <style type="text/css">
        .wrap{width:1000px; margin:0 auto; height: 480px; overflow: hidden; position: relative;text-align: center;}
        li{list-style: none; display: inline-block; width:30px; height: 30px;  border:1px solid red; text-align: center; line-height: 30px; background-color: orange; margin-left: 5px;}
        .num_list{position: absolute; bottom: 20px; left: 10%;}
        .img_continer img{display: none;}
        .img_continer .img_dis{display: inline-block;}
        .le, .ri{font-size: 100px; font-weight: bold; color:red; position: absolute;}
        .le{top:30%; left: 0;}
        .ri{top:30%; right:0;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="img_continer">
            <img src="imgs/big_5.jpg">
            <img src="imgs/big_7.jpg">
            <img src="imgs/big_8.jpg">
        </div>
        <div class="num_list">
            <ul></ul>
        </div>
        <div class="le_ri">
            <span class="le"><</span>
            <span class="ri">></span>
        </div>
    </div>
    <script type="text/javascript">
        //获取图片//获取数字，根据图片的个数增数字
　　　　　img_listWrap = document.getElementsByClassName("img_list")[0];
        img_list = img_listWrap.getElementsByTagName("img");
        img_listLen = img_list.length;
        var str=""
        for(let i=0; i<img_listLen; i++){
            str += "<li>" + (i+1) +"</li>"
        }
        num_list_ul = document.getElementsByClassName("num_list")[0].getElementsByTagName("ul")[0];
        num_list_ul.innerHTML =str;


//获取数字的列表





　　　　num_list_li = num_list_ul.getElementsByTagName("li");
        // 变量  去控制 显示图片的下标
        current = 0;
        img_list[current].setAttribute("class","img_show");
        num_list_li[current].setAttribute("class","active")

        //点击下标1 2 3 显示对应的图片        
        for(let i=0;i<num_list_li.length;i++){
            num_list_li[i].onclick=function(){
                current = i;
                for(let j=0;j<num_list_li.length;j++){
                    if(i!=j){
                        img_list[j].setAttribute("class","");
                        num_list_li[j].setAttribute("class","")
                    }
                }
                img_list[i].setAttribute("class","img_show");
                num_list_li[i].setAttribute("class","active")
            }
        }




//图片自动轮播


//为了方便，后期可以封装成一个函数




        function let(){
            for(let i=0; i<img_listLen;i++){
                if(i!=current){
                    img_list[i].setAttribute("class","");
                    num_list_li[i].setAttribute("class","")
                }
                if(current>2){
                    current=0;
                }
            }
        }

        se = setInterval(function(){
            current++;
            let();
            img_list[current].setAttribute("class","img_show");
            num_list_li[current].setAttribute("class","active")
        },2000)

        // 鼠标移动到图片上，图片轮播停止
        for(let i=0;i<img_listLen;i++){
            img_list[i].onmouseover = function(){
                clearInterval(se);
            }
            img_list[i].onmouseout = function(){
                se = setInterval(function(){
                current++;
                let();
                img_list[current].setAttribute("class","img_show");
                num_list_li[current].setAttribute("class","active")
            },2000)
            }
        }




 


//左右两边的控制按钮
        var leControl = document.getElementsByClassName("le")[0];
        var riControl = document.getElementsByClassName("ri")[0];
        leControl.onclick = function(){
            current ++;
            lets();
            img_list[current].setAttribute("class",'img_dis');
        };
        riControl.onclick = function(){
            current ++;
            lets();
            img_list[current].setAttribute("class",'img_dis');
        };

    </script>
</body>
</html>




 






            

            
posted @ 
2019-11-04 23:58 
壹碗 
阅读(188) 
评论(0) 
编辑 
收藏 
举报