美文网首页
js轮播图

js轮播图

作者: Wo信你个鬼 | 来源:发表于2019-03-11 20:23 被阅读0次
l.png
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                list-style: none;
                text-decoration: none;
                box-sizing: border-box;
            }
            
            .swiper {
                width: 520px;
                height: 280px;
                overflow: hidden;
                margin: 50px auto;
                position: relative;
            }
            
            .swiper ul {
                overflow: hidden;
                width: 99999px;
            }
            
            .swiper li {
                float: left;
                /*width: 520px;*/
            }
            /*按钮*/
            
            .btn {
                position: absolute;
                top: 50%;
                left: -4px;
                width: 30px;
                height: 30px;
                margin-top: -15px;
                text-align: center;
                line-height: 27px;
                border-radius: 50%;
                font-size: 26px;
                color: #fff;
                background: #666;
                opacity: 0.5;
                cursor: pointer;
                -webkit-user-select: none;
                -ms-user-select: none;
            }
            
            .next {
                left: 494px;
            }
            
            .transi {
                transition: 500ms;
            }
            
            ul.item {
                position: absolute;
                width: 48px;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                overflow: hidden;
                z-index: 999;
            }
            
            .item li {
                float: left;
                width: 10px;
                height: 10px;
                border: 1px solid #fff;
                background: #fff;
                border-radius: 50%;
                margin: 0 3px;
            }
            
            li.active {
                background: deepskyblue;
            }
        </style>
    </head>

    <body>
        <div class="swiper">
            <!--ul>li*4>img[src=$.jpg]-->
            <!--图片区域 -->
            <ul class="imgBox">
                <li><img src="image/1.jpg" alt="" /></li>
                <li><img src="image/2.jpg" alt="" /></li>
                <li><img src="image/4.jpg" alt="" /></li>
            </ul>
            <!--左右按钮-->
            <div class="btn pre">&lt;</div>
            <div class="btn next">&gt;</div>
            <!--小圆点-->
            <ul class="item">
                <!--<li class="active"></li>
                <li></li>
                <li></li>-->
            </ul>
        </div>
        <script type="text/javascript">
            window.onload = function() {
                let swiper = document.querySelector(".swiper"),
                    pre = swiper.querySelector(".pre"),
                    next = swiper.querySelector(".next"),
                    _ul = swiper.querySelector(".imgBox"),
                    ali = _ul.querySelectorAll("li"),
                    aImg = _ul.querySelectorAll("li img"),
                    imgW = aImg[0].offsetWidth,
                    index = 1, //计算滚动到哪张图片
                    isTransitionend = true, //判断动画是否已完成
                    item = swiper.querySelector(".item");
                //克隆第一张图片,添加到图片队列的最后面
                let cloneLi = ali[0].cloneNode(true);
                _ul.appendChild(cloneLi);
                //克隆最后一张图片,添加到图片队列的最前面
                let cloneLastLi = ali[ali.length - 1].cloneNode(true);
                //prepend()方法,将元素添加到所有子元素的最前面
                _ul.prepend(cloneLastLi);
                //_ul.insertBefore(cloneLastLi,ali[0]);

                //初始化图片队列
                _ul.style.transform = "translateX(" + (-imgW * index) + "px)";
                //点击左边按钮
                pre.addEventListener("click", () => {
                    if(isTransitionend) {
                        _ul.classList.add("transi");
                        index++;
                        _ul.style.transform = "translateX(" + (-imgW * index) + "px)";
                        isTransitionend = false;
                        fenyeq(index);
                    }
                })

                //点击右边按钮
                next.addEventListener("click", () => {
                    if(isTransitionend) {
                        _ul.classList.add("transi");
                        index--;
                        _ul.style.transform = "translateX(" + (-imgW * index) + "px)";
                        isTransitionend = false;
                        fenyeq(index);
                    }
                })
                //边界判断
//              debugger;
                _ul.addEventListener("transitionend", () => {
                    if(index == aImg.length + 1) { 
                        index = 1;
                        _ul.classList.toggle("transi");
                        _ul.style.transform = "translateX(" + (-imgW * index) + "px)";
                    }
                    if(index == 0) {
                        index = aImg.length;
                        _ul.classList.toggle("transi");
                        _ul.style.transform = "translateX(" + (-imgW * index) + "px)";
                    }
                    isTransitionend = true;
                })

                //分页器
                //根据图片的张数生成分页器
                for(let i = 0; i < aImg.length; i++) {
                    let newLi = document.createElement("li");
                    item.appendChild(newLi);
                }
                item.children[0].classList.add("active");
                //给分页器添加点击事件
                for(let j = 0; j < item.children.length; j++) {
                    item.children[j].addEventListener("click", () => {
                        for(let k = 0; k < item.children.length; k++) {
                            item.children[k].classList.remove("active");
                        }
                        item.children[j].classList.add("active");
                        index = j + 1;
                        _ul.classList.add("transi");
                        _ul.style.transform = "translateX(" + (-imgW * index) + "px)";
                    })
                }
                //点击左右按钮分页器跟随走动
                function fenyeq(index) {
                    for(let k = 0; k < item.children.length; k++) {
                        item.children[k].classList.remove("active");
                    }
                    index = index - 1;
                    index = index == 3 ? 0 : index; //左按钮边界
                    index = index < 0 ? item.children.length - 1 : index; //右按钮边界
                    item.children[index].classList.add("active");
                }
            }
            var next = document.querySelector(".next")
            var i = 0;
            setInterval(function(){
                i++;
                next.click();
            },1900)
        </script>
    </body>

</html>

相关文章

  • 三种样式的轮播图

    一、100%比例轮播图 HTML代码 CSS样式 js代码 二、手动箭头轮播图 三、简易轮播图

  • 第五周学习内容

    焦点图轮播特效之原理、焦点图轮播样式之布局、焦点图轮播之箭头切换、焦点图轮播之无限滚动。 js简介、用法、输出。

  • 轮播图

    轮播图01 html css js

  • 项目-轮播图

    整个轮播图分为三部分:轮播指标、轮播项目及轮播导航。用boostrap实现轮播图要比用js、jQuery方便的多,...

  • 使用vue-awesome-swiper方法

    在main.js中引入轮播图插件 在基础组件中建立轮播图组件:

  • 原生JS轮播图

    :轮播图 1:页面 2:CSS 3:Js

  • JavaScript | 365笔记第87天 | 原生JS做轮播

    用原生JS做一个轮播图

  • 2021-11-25

    js 一页显示多张图无缝轮播

  • 原生js制作轮播图

    原生js 制作的轮播图 今天学习了一个原生js轮播图的方法。效果图如下 通过点击上下页和中间的点进行翻页,通过改变...

  • 常用插件

    js 插件 1,myFocus 焦点图插件===专注焦点图的js 库(轮播图)轻量级 http://demo.jb...

网友评论

      本文标题:js轮播图

      本文链接:https://www.haomeiwen.com/subject/iaripqtx.html