图片轮播

Posted 2020-11-30 0422hao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片轮播相关的知识，希望对你有一定的参考价值。

秃头警告！！终于图片轮播用原生的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_num = document.getElementsByClassName(‘img_continer‘)[0];
        img_list = img_num.getElementsByTagName("img");
        img_len = img_list.length;
        var str ="";
        for(var i=0; i<img_len;i++){
            str += "<li>"+ (i+1) +"</li>"
        };

        //获取数字，根据图片的个数增数字
        ul_list = document.getElementsByClassName(‘num_list‘)[0].getElementsByTagName(‘ul‘)[0];
        ul_list.innerHTML = str;
        
        //获取数字的列表
        li_list = ul_list.getElementsByTagName("li");
        var current =0;
        img_list[current].setAttribute("class",‘img_dis‘);

        for(let i=0; i<li_list.length;i++){
            // console.log(li_list[i].innerHTML);
            li_list[i].onclick = function(){
                current = i;
                for(let j=0;j<li_list.length;j++){
                    if(i!=j){img_list[j].setAttribute("class",‘‘);};
                };    
                img_list[current].setAttribute("class",‘img_dis‘);    
            };                
        };

        //图片自动轮播
        //为了方便，后期可以封装成一个函数

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

        se = setInterval(function(){
            current ++;
            lets();
            img_list[current].setAttribute("class",‘img_dis‘);    
        },2000);
        for(let s = 0;s<li_list.length;s++){
            img_list[s].onmouseover = function(){
                clearInterval(se);
            };
            img_list[s].onmouseout = function(){
                se = setInterval(function(){
                current ++;
                for(let i=0; i<li_list.length;i++){
                    if(i != current){img_list[i].setAttribute("class",‘‘);};
                };
                if(current>2){
                    current = 0;
                }
                img_list[current].setAttribute("class",‘img_dis‘);    
            },5000);
                }

        }
        //左右两边的控制按钮
        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>

以上是关于图片轮播的主要内容，如果未能解决你的问题，请参考以下文章

网页设计图片轮播，将鼠标放在图片上，图片会自动播放，代码怎么改？

轮播图片高效图片轮播，两个imageView实现