flex缩放轮播图纯原生

支持缩放宽度的轮播图
```html
<div class="content-wrap">
    <div class="main-wrap">
        <div class="main-content">
            <div class="lb-wrap">
                
                <ul class="lb-ul">
                    <li class="lb-li">
                        <a href="" class="aimg">
                            <img src="http://blog.shyngo.cn/article/img/logosg.png" alt="">
                        </a>
                        <a href="" class="aspan">
                            <span>今天我做了一个轮播图1</span>
                        </a>
                    </li>
                    <li>
                        <a href="" class="aimg">
                            <img src="http://blog.shyngo.cn/article/img/logosg.png" alt="">
                        </a>
                        <a href="" class="aspan">
                            <span>今天我做了一个轮播图2</span>
                        </a>
                    </li>
                    <li>
                        <a href="" class="aimg">
                            <img src="http://pic.shyngo.cn/uploads/screenshot/559b9247a44affddebb8543713850e32.png" alt="">
                        </a>
                        <a href="" class="aspan">
                            <span>今天我做了一个轮播图3</span>
                        </a>
                    </li>
                    <li>
                        <a href="" class="aimg">
                            <img src="http://pic.shyngo.cn/uploads/screenshot/c25d5d07ac68f1efabeb32b8f7fbf2d9.png" alt="">
                        </a>
                        <a href="" class="aspan">
                            <span>今天我做了一个轮播图4</span>
                        </a>
                    </li>
                </ul>
                
                <ol class="circle"></ol>
                
                <a href="javascript:;" class="arrow-l">
                    <i class="icon iconfont"></i>
                </a>
                <a href="javascript:;" class="arrow-r">
                    <i class="icon iconfont"></i>
                </a>
            </div>
        </div>
    </div>
</div>

// 2.动态生成小圆圈.(主要涉及到节点操作.)
            function generate_circle() {
              for (var i = 0; i < lis.length; i++) {
                let li = document.createElement('li');
                // 记录当前小圆圈的索引号,通过自定义属性来做.
                li.setAttribute('index', i);
                ol.appendChild(li);
                // 3.小圆圈的排他思想:在生成小圆圈的同时,直接绑定点击事件.
                li.addEventListener('click', function () {
                  // 除了当前li,其他li都清除掉类名
                  for (var j = 0; j < ol.children.length; j++) {
                    ol.children[j].className = '';
                  }
                  this.className = 'current';
                  // 4.点击小圆圈,滚动图片
                  var index = this.getAttribute('index');
                  animate(ul, index);
                });
              }
              // 把ol中的第一个孩子的类名设置成current
              ol.children[0].className = 'current';
            }

generate_circle();

arrowR.addEventListener('click', function () {
              var left = ul.style.left === "" ? 0 : ul.style.left;
              var which = (Math.abs(parseInt(left)) / li.clientWidth)
              console.log("1:", Math.abs(parseInt(left)), "2:", li.clientWidth)
              animate(ul, which + 1, function () {
              });
            });
            arrowL.addEventListener('click', function () {
              //获取当前是第几个 ul.children.length  ul.style.left
              var left = ul.style.left === "" ? 0 : ul.style.left;
              var which = Math.abs(parseInt(left)) / li.clientWidth
              animate(ul, which - 1, function () {
              });
            });
          })

function circleChange(index) {
            var outer = document.querySelector('.lb-wrap');
            var ol = outer.querySelector('ol');
            for (var i = 0; i < ol.children.length; i++) {
              ol.children[i].className = '';
            }
            ol.children[index].className = 'current';
          }

.lb-ul {
    height: 300px;
    width: 400%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    transition: all 1s linear;
}

.lb-ul > li {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
    height: 100%;
}

.lb-ul li .aimg {
    display: inherit;
    width: 100%;
    height: 100%;
}

.lb-ul li .aimg img {
    width: 100%;
    height: 300px;
    overflow: hidden;
    object-fit: cover;
    transition: all 0.2s linear;
}

.lb-ul li .aspan {
    position: relative;
    left: 1rem;
    height: 2.5rem;
    line-height: 2.5rem;
    top: -3.5rem;
    color: white;
}

.circle {
    margin: 0px;
    padding: 0px;
    display: flex;
    position: absolute;
    top: 90%;
    right: 1rem;
    width: 80px;
    height: 2.5rem;
    line-height: 2rem;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.lb-wrap .circle li {
    margin: 0px 3px;
    list-style: none;
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
    out-line: none;
    padding: 0px;
    float: left;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid rgba(86, 85, 83, 0.78);
    background: rgba(86, 85, 83, 0.78);

}

.lb-wrap .circle li.current {
    width: 2rem;
    border-radius: 3px;
    border: 1px solid rgba(1, 168, 87, 0.72);
    background: rgba(1, 168, 87, 0.72);
}

.arrow-l {
    z-index: 100;
    display: none;
    position: absolute;
    text-align: right;
    width: 2rem;
    height: 40px;
    background: #583f3f5c;
    border-radius: 0px 3px 3px 0px;
}

.arrow-r {
    z-index: 100;
    display: none;
    position: absolute;

right: 0px;
    width: 2rem;
    height: 40px;
    background: #583f3f5c;
    border-radius: 3px 0px 0px 3px;
}

.arrow-l, .arrow-r {
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    color: rgba(227, 223, 223, 0.42);
    top: 47%;
}
</style>
```

相关推荐

近期文章