动态轮播图

最近要写轮播图，公司封装的框架不支持动态轮播图，找到了一个通用的轮播图，可以从数据库读路径，形成动态的。

CSS部分

     

<style>

            #container {

          position: relative;

          overflow: hidden;

        }

        .block {

          position: absolute;

          display: inline-block;

          width: 50%;

          height: 100%;

          transition: all 1s;

        }

        h1 {

          position: absolute;

          top: 50%;

          width: 100%;

          text-align: center;

          transform: translateY(-50%);

          padding: 0;

          margin: 0;

        }

        button{

            background: #fff;

             border: 1px solid #C0CCDA;

                   color: #1F2D3D;

                   width:56px;

                   heigth:30px;

                   -moz-border-radius:6px;

                   -ms-border-radius:6px;

                   -o-border-radius:6px;

                   -webkit-border-radius:6px;

                   border-radius:6px!important;

                   padding: 5px 9px;

                  font-size: 12px;

             border-radius: 4px;

        }

      </style>

HTML部分

  <div id="app">

  <div id="container">

      <!-- 图片位置  -->

  </div>

  

 

<div align="center" style="position:relative;">

  <button id="btnPrev">上一张</button>

  <button id="btnNext">下一张</button>

  </div>

</div>

JS部分

<script>

            var urlString = response.getParameter("urlString");

            var url = urlString.split("&");

            var obj = document.getElementById("container");//详情图片

            obj.innerHTML="";

            for(var i = 0;i<url.length;i++){

                  obj.innerHTML+= "<div class=\"block\"><img  src=\'"+url[i]+"\'  style=\"width:500px;height:300px\" ></div>";

            }

            var config = {

              height: "300px",

              index: 0,

              scale: 0.83

            }

            var container = document.getElementById("container")

            container.style.height = config.height

            var blockLength =  document.getElementsByClassName("block").length

            function getOffSet() {

              var blocks = document.getElementsByClassName("block")

              var offsetWidth =  document.getElementById("container").offsetWidth

            for (let i = 0, len = blocks.length; i < len; i++) {

                if (i == config.index) {

                  var s = blocks[i].style

                  var translate = offsetWidth / 4

                  s.transform = s.msTransform = s.webkitTransform =  `translateX(${translate}px)`

                  s.zIndex = 2

                } else {

                  var s = blocks[i].style

                  var translate = calculateTranslate(i, config.index,  offsetWidth, blocks.length)

                  s.transform = s.msTransform = s.webkitTransform =  `translateX(${translate}px) scale(${config.scale})`

                  s.zIndex = 1

                }

              }

            }

            getOffSet()

            // 计算卡片化中组件的位置

            // 当前组件 选中组件 容器宽度

            function calculateTranslate(index, activeIndex, parentWidth,  length) {

              if ((activeIndex == 0 && index == length - 1) || (index ==  activeIndex - 1)) {

                // 左边卡片

                return -(1 - config.scale) * parentWidth / 4;

              }

              if ((activeIndex == length - 1 && index == 0) || (index ==  activeIndex + 1)) {

                // 右边卡片

                return (2 - config.scale) * (parentWidth / 2)

              }

              // 其他卡片

              return (1 + config.index / 4) * parentWidth

            }

            function prev() {

              pauseTimer()

              if (config.index > 0) {

                config.index--

              } else {

                config.index = blockLength - 1

              }

              getOffSet()

              startTimer()

            }

            function next() {

              pauseTimer()

              if (config.index < blockLength - 1) {

                config.index++

              } else {

                config.index = 0

              }

              getOffSet()

              startTimer()

            }

            document.getElementById("btnPrev").onclick = prev

            document.getElementById("btnNext").onclick = next

            var timer = null

            function pauseTimer() {

              if (timer) {

                clearInterval(timer)

              }

            }

            function startTimer() {

              timer = setInterval(next, 3000)

            }

            startTimer()

      

            

</script>

标注部分是图片地址读取。后台相应的写代码就好。