1. 编程号首页

轮播图的代码怎么写_什么叫轮播图

编程小号 • • 未分类

轮播图的代码怎么写_什么叫轮播图轮播图_轮播图代码

轮播图的代码怎么写_什么叫轮播图"

01 先写出基本标签布局，这里用父级div嵌套子级ul和div标签。ul是存储图片，子级div是圆点导航的父级div。代码如下：

<div class="banner">
        <ul class="imglist">
            <li><img src="./banner/1.png" alt=""></li>
            <li><img src="./banner/2.jpg" alt=""></li>
            <li><img src="./banner/3.jpg" alt=""></li>
            <li><img src="./banner/4.jpg" alt=""></li>
        </ul>
        <div class="cir"></div>
</div>

02 进行基本布局，css代码如下：

第一步先清除可能有的内外边距，然后进行布局

        *{
            padding: 0px;
            margin: 0px;
        }
        /* 可视边框的样式 */
        .banner{
            width: 600px;
            height: 350px;
            margin: auto;
            border: 10px solid #999;
            position: relative;
            overflow: hidden;
        }
        /* ul标签的样式 */
        .imglist{
            position: absolute;
        }
        li{
            list-style: none;
            margin-right: 10px;
            float: left;
        }
        img{
            width: 600px;
            height: 350px;
        }
        /* 圆点导航父级div标签的样式 */
        .cir{
            position: absolute;
            left: 50%;
            bottom: 15px;
            transform: translateX(-50%);
        }
        /* 圆点导航的设置 */
        .cir a{
            display: block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: green;
            margin-right: 10px;
            float: left;
        }
        /* 圆点导航点击后样式 */
        .cir a.hover{
            background-color: black;
            opacity: .5;
        }

03 编写javascript部分，首先获取对象，并定义变量

        var banner = document.querySelector('.banner');   //获取可视边框
        var imglist = document.querySelector(".imglist");  //获取ul标签
        var cir = document.querySelector('.cir');          //获取圆点导航父级div
        var lis = imglist.children;                       //所有li标签在一个伪数组中
        var thisindex = 0;
        var flag = true;

04 在上面的css样式中，ul标签没有设置宽度，这里用图片的个数来获取宽度，并且以图片数目添加圆点导航。代码如下：

 //由图片width和个数获取ul的width
imglist.style.width = lis.length*610+'px';      //注意：01width是小写  02不要忘记加单位‘px’
            
 //根据图片个数添加圆点导航
 for (var i = 0; i < lis.length; i++) {
                var anode = document.createElement('a');    //创建<a></a>
                cir.appendChild(anode);                     //在父级div里面添加<a>
 }

05 圆点导航的点击事件。这里的第一行代码是为了后面的恢复圆点点击后效果设置的，后面注释有解释。

cir.children[0].classList.add('hover');     //页面必须先存在hover类
            //建立圆点导航anode和ul图片的对应关系
            for(var i=0; i<lis.length; i++){
                cir.children[i].setAttribute('index',i);     //li添加自定义属性'index'
            }

            //圆点点击事件
            cirClick();
            function cirClick(){
                cir.addEventListener('click',function(e){
                    if(e.target.nodeName != 'A'){
                        return false;
                    }
                    if(flag){                       //节流阀
                        flag = false;
                        thisindex = e.target.getAttribute('index');
                        // imglist.style.left = -thisindex*610+'px';
                        move(imglist,-thisindex*610,function(){
                            flag = true;
                        })
                    
                        cir.querySelector('.hover').classList.remove('hover');    //恢复在每次点击圆点后原来的样式（由灰变绿）
                        e.target.classList.add('hover');                            //圆点点击后样式
                    }
                    
                })  
            }

05 缓动函数，实现轮播图的图片的移动（由快到慢）。

            //缓动函数
            var num = 0;
            function move(box,target,callback){
                box.myTime = setInterval(function(){
                    var osleft = box.offsetLeft;     //这里是属性，不能加()
                    var num = (target-osleft) / 10;
                    num = num>0 ? Math.ceil(num):Math.floor(num);
                    if(osleft == target){
                        clearInterval(box.myTime);
                        callback && callback();
                    }else{
                        box.style.left = num+osleft+'px';
                    }
                },30)
            }

08 实现轮播图的自动播放

            //自动轮播
            auto();
            function auto(){
                setInterval(function(){
                    if(flag){
                        flag = false;
                        if(thisindex == lis.length){
                            thisindex = 0;
                        }
                        move(imglist,-thisindex*610,function(){
                            flag = true;
                        })
                        cir.querySelector('.hover').classList.remove('hover');    //恢复在每次点击圆点后原来的样式（由灰变绿）
                        cir.children[thisindex].classList.add('hover');
                        thisindex++;
                    }
                }, 2000);
            }

完整代码如下

在完整代码里面，再获取对象和定义变量后全部放在window.onload();函数中，使得页面加载完成后再执行轮播效果。

ps:有疑问可以评论看到会回复。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        /* 可视边框的样式 */
        .banner{
            width: 600px;
            height: 350px;
            margin: auto;
            border: 10px solid #999;
            position: relative;
            overflow: hidden;
        }
        /* ul标签的样式 */
        .imglist{
            position: absolute;
        }
        li{
            list-style: none;
            margin-right: 10px;
            float: left;
        }
        img{
            width: 600px;
            height: 350px;
        }
        /* 圆点导航父级div标签的样式 */
        .cir{
            position: absolute;
            left: 50%;
            bottom: 15px;
            transform: translateX(-50%);
        }
        /* 圆点导航的设置 */
        .cir a{
            display: block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: green;
            margin-right: 10px;
            float: left;
        }
        /* 圆点导航点击后样式 */
        .cir a.hover{
            background-color: black;
            opacity: .5;
        }
    </style>
</head>
<body>
    <div class="banner">
        <ul class="imglist">
            <li><img src="./banner/1.png" alt=""></li>
            <li><img src="./banner/2.jpg" alt=""></li>
            <li><img src="./banner/3.jpg" alt=""></li>
            <li><img src="./banner/4.jpg" alt=""></li>
        </ul>
        <div class="cir"></div>
    </div>
    <script>
        var banner = document.querySelector('.banner');   //获取可视边框
        var imglist = document.querySelector(".imglist");  //获取ul标签
        var cir = document.querySelector('.cir');          //获取圆点导航父级div
        var lis = imglist.children;                       //所有li标签在一个伪数组中
        var thisindex = 0;
        var flag = true;

        window.onload = function(){
            //由图片width和个数获取ul的width
            imglist.style.width = lis.length*610+'px';      //注意：01width是小写  02不要忘记加单位‘px’
            
            //根据图片个数添加圆点导航
            for (var i = 0; i < lis.length; i++) {
                var anode = document.createElement('a');    //创建<a></a>
                cir.appendChild(anode);                     //在父级div里面添加<a>
            }

            cir.children[0].classList.add('hover');     //页面必须先存在hover类
            //建立圆点导航anode和ul图片的对应关系
            for(var i=0; i<lis.length; i++){
                cir.children[i].setAttribute('index',i);     //li添加自定义属性'index'
            }

            //圆点点击事件
            cirClick();
            function cirClick(){
                cir.addEventListener('click',function(e){
                    if(e.target.nodeName != 'A'){
                        return false;
                    }
                    if(flag){                       //节流阀
                        flag = false;
                        thisindex = e.target.getAttribute('index');
                        // imglist.style.left = -thisindex*610+'px';
                        move(imglist,-thisindex*610,function(){
                            flag = true;
                        })
                    
                        cir.querySelector('.hover').classList.remove('hover');    //恢复在每次点击圆点后原来的样式（由灰变绿）
                        e.target.classList.add('hover');                            //圆点点击后样式
                    }
                    
                })  
            }

            //自动轮播
            auto();
            function auto(){
                setInterval(function(){
                    if(flag){
                        flag = false;
                        if(thisindex == lis.length){
                            thisindex = 0;
                        }
                        move(imglist,-thisindex*610,function(){
                            flag = true;
                        })
                        cir.querySelector('.hover').classList.remove('hover');    //恢复在每次点击圆点后原来的样式（由灰变绿）
                        cir.children[thisindex].classList.add('hover');
                        thisindex++;
                    }
                }, 2000);
            }

            //缓动函数
            var num = 0;
            function move(box,target,callback){
                box.myTime = setInterval(function(){
                    var osleft = box.offsetLeft;     //这里是属性，不能加()
                    var num = (target-osleft) / 10;
                    num = num>0 ? Math.ceil(num):Math.floor(num);
                    if(osleft == target){
                        clearInterval(box.myTime);
                        callback && callback();
                    }else{
                        box.style.left = num+osleft+'px';
                    }
                },30)
            }     
        }
    </script>
</body>
</html>

今天的文章轮播图的代码怎么写_什么叫轮播图分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：http://bianchenghao.cn/77267.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注