用:css指令代替:attr更改样式，把直接给数据模型赋值的写法改成pushArray的写法，严格弱类型赋值的数据类型，增加了3种皮肤选项。不过还有bug，明晚继续。。

js/lib/sliders/main.css

@@ -1 +1 @@
-.do-sliders{position:relative;height:100%;width:100%}.do-sliders .container{position:relative;height:100%;overflow:hidden}.do-sliders .container .box{height:100%;width:100%;transition:.4s}.do-sliders .container .box a{position:relative;display:inline-block;height:100%;vertical-align:middle}.do-sliders .container .box a img{width:100%;height:100%;object-fit:cover}.do-sliders .container .box a p.default-class{position:absolute;width:30%;min-height:30px;line-height:30px;left:0;bottom:15%;right:0;margin:auto;color:#fff;text-align:center;font-size:25px}.do-sliders .slider-btn{position:absolute;top:50%;min-width:50px;min-height:50px;margin-top:-25px;text-decoration:none;font-size:30px;line-height:50px;text-align:center;border-radius:100%;color:rgba(255,255,255,0.6);font-weight:bold;z-index:1;transition:.4s}.do-sliders .slider-btn:hover{color:#fff}.do-sliders .slider-btn:nth-of-type(1){margin-left:20px}.do-sliders .slider-btn:nth-of-type(2){right:0;margin-right:20px}.do-sliders .btn{position:absolute;bottom:-20px;width:100%;min-height:50px;max-height:100px;margin:0 auto;text-align:center;overflow:hidden}.do-sliders .btn span{display:inline-block;width:10px;height:10px;margin:20px 5px;border-radius:100%;background:rgba(255,255,255,0.8);cursor:pointer;transition:.5s}.do-sliders .btn span:hover{background:#1abc9c}.do-sliders .btn .no-preview-act{background:#16a085}.do-sliders .btn .btn-img{display:inline-block;position:relative;width:150px;height:100px;margin:0 5px;transition:.4s;cursor:pointer}.do-sliders .btn .btn-img img{position:relative;width:100%;height:100%;transition:.4s;z-index:2}.do-sliders .btn .btn-img .preview-act{transform:scale(0.95)}.do-sliders .btn .btn-img::after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:#1abc9c;opacity:0;transition:.8s;z-index:1}.do-sliders .btn .btn-img.act::after{opacity:1}@keyframes right-to-left{49%{-webkit-transform:translate(100%)}50%{-webkit-transform:translate(-100%);opacity:0}100%{opacity:1}}@keyframes left-to-right{49%{-webkit-transform:translate(-100%)}50%{-webkit-transform:translate(100%);opacity:0}100%{opacity:1}}
+.do-sliders{position:relative;height:100%;width:100%}.do-sliders .slider-content{height:75%;position:relative}.do-sliders .slider-content .container{position:relative;height:100%;overflow:hidden}.do-sliders .slider-content .container .box{height:100%;width:100%;transition:.4s}.do-sliders .slider-content .container .box a{position:relative;display:inline-block;height:100%;vertical-align:middle}.do-sliders .slider-content .container .box a img{width:100%;height:100%;object-fit:cover}.do-sliders .slider-content .container .box a .title-class{position:absolute;width:30%;min-height:30px;line-height:30px;left:0;bottom:15%;right:0;margin:auto;text-align:center;font-size:25px}.do-sliders .slider-content .container .box a .elm{height:100%;width:100%;background:#333}.do-sliders .slider-content .container .box a .default-elm{width:100%;height:100%}.do-sliders .slider-content .slider-btn{position:absolute;top:50%;min-width:50px;min-height:50px;margin-top:-25px;text-decoration:none;font-size:30px;line-height:50px;text-align:center;border-radius:100%;color:rgba(255,255,255,0.6);font-weight:bold;z-index:1;transition:.4s}.do-sliders .slider-content .slider-btn:nth-of-type(1){margin-left:20px}.do-sliders .slider-content .slider-btn:nth-of-type(2){right:0;margin-right:20px}.do-sliders .slider-preview-btn{position:relative;bottom:-5%;height:20%;width:100%;margin:0 auto;text-align:center;overflow:hidden}.do-sliders .slider-preview-btn span{display:inline-block;width:10px;height:10px;margin:20px 5px;border-radius:100%;background:rgba(255,255,255,0.8);cursor:pointer;transition:.5s}.do-sliders .slider-preview-btn span:hover{background:#1abc9c}.do-sliders .slider-preview-btn .no-preview-act{background:#16a085}.do-sliders .slider-preview-btn .btn-img{display:inline-block;position:relative;width:150px;height:100%;margin:0 5px;transition:.4s;cursor:pointer}.do-sliders .slider-preview-btn .btn-img img{position:relative;width:100%;height:100%;object-fit:cover;transition:.4s;z-index:2}.do-sliders .slider-preview-btn .btn-img .preview-act{transform:scale(0.95)}.do-sliders .slider-preview-btn .btn-img .btn-background{content:'';position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:.8s;z-index:1}.do-sliders .slider-preview-btn .btn-img.act .btn-background{opacity:1}.do-sliders.skin-0 .title-class{color:#fff}.do-sliders.skin-1 .title-class{color:#c54133}.do-sliders.skin-2 .title-class{color:#16a085}.do-sliders.skin-3 .title-class{color:#2c81ba}.do-sliders.skin-0 .slider-btn{color:rgba(255,255,255,0.6)}.do-sliders.skin-1 .slider-btn{color:#c54133}.do-sliders.skin-2 .slider-btn{color:#16a085}.do-sliders.skin-3 .slider-btn{color:#2c81ba}.do-sliders.skin-0 .slider-btn:hover{color:#fff}.do-sliders.skin-1 .slider-btn:hover{color:#e74c3c}.do-sliders.skin-2 .slider-btn:hover{color:#1abc9c}.do-sliders.skin-3 .slider-btn:hover{color:#3498db}.do-sliders.skin-0 .btn-img .btn-background{background:#fff}.do-sliders.skin-1 .btn-img .btn-background{background:#e74c3c}.do-sliders.skin-2 .btn-img .btn-background{background:#1abc9c}.do-sliders.skin-3 .btn-img .btn-background{background:#3498db}.do-sliders.skin-0 .default-elm{background:#fff}.do-sliders.skin-1 .default-elm{background:#e74c3c}.do-sliders.skin-2 .default-elm{background:#1abc9c}.do-sliders.skin-3 .default-elm{background:#3498db}@keyframes right-to-left{49%{-webkit-transform:translate(100%)}50%{-webkit-transform:translate(-100%);opacity:0}100%{opacity:1}}@keyframes left-to-right{49%{-webkit-transform:translate(-100%)}50%{-webkit-transform:translate(100%);opacity:0}100%{opacity:1}}

js/lib/sliders/main.htm

@@ -1,30 +1,38 @@
-<div class="do-sliders" :if="sliderList.length" :mouseenter="$stopSlide()" :mouseleave="$startSlide()">
+<div class="do-sliders" :class="{{skin}}">
-    <a class="do-ui-font slider-btn" href="javascript:;"
-        :click="$go(-1)">&#xe8ed</a>
 
-    <div class="container">
+    <div class="slider-content" :if="sliderList.length" :mouseenter="$stopSlide()" :mouseleave="$startSlide()">
-        <div class="box"
+        <a class="do-ui-font slider-btn" href="javascript:;"
-            :css="{width: sliderList.length * 100 + '%', transform: transform}">
+            :click="$go(-1)">&#xe8ed</a>
-            <a  target="_blank"
+
-                :repeat="sliderList"
+        <div class="container">
-                :css="{width: currWidth}"
+            <div class="box"
-                :attr="{href: el.link || 'javascript:;'}">
+                :css="{width: sliderList.length * 100 + '%', transform: transform}">
-                <img :attr-src="el.src">
+                <a  target="_blank"
-                <p :if="el.title" 
+                    :repeat="sliderList"
-                    :html="el.title"
+                    :css="{width: currWidth}"
-                    class="default-class"></p>
+                    :attr="{href: el.link || 'javascript:;'}">
-            </a>
+                    <img :if="el.src && el.src != ''" :attr-src="el.src">
+                    <div class="default-elm" :class="{elm: !el.elm && !el.src, 'preview-act': curr === $index ||  (curr >= maxNum && $index == maxNum - 1)}" :if="!el.src" :html="el.elm ? el.elm : ''"></div>
+                    <p :if="el.title"
+                        :html="el.title"
+                        class="title-class"></p>
+                </a>
+            </div>
         </div>
+
+        <a class="do-ui-font slider-btn" href="javascript:;"
+            :click="$go(1)">&#xe8eb</a>
     </div>
 
-    <div class="btn" :css="{bottom: (preview ? '-120px' : '0;')}">
+
+    <div class="slider-preview-btn">
         <span :if="!preview"
             href="javascript:;"
             :class="{'no-preview-act': curr === $index}"
             :repeat="sliderList"
             :click="$jump($index)">
         </span>
-        
+
         <a class="btn-img" href="javascript:;"
             :if="preview"
             :class="{act: curr === $index || (curr >= maxNum && $index == maxNum - 1)}"
@@ -32,10 +40,9 @@
             :repeat="sliderBtnList">
             <img
                 :class="{'preview-act': curr === $index ||  (curr >= maxNum && $index == maxNum - 1)}"
+                :if="el.src && el.src != ''"
                 :attr-src="el.src" />
+            <div class="btn-background"></div>
         </a>
     </div>
-
-    <a class="do-ui-font slider-btn" href="javascript:;"
-        :click="$go(1)">&#xe8eb</a>
 </div>

js/lib/sliders/main.js

@@ -6,15 +6,8 @@
 
 define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
 
-    /**
+    var dom
-     * [获取当前幻灯片元素宽度]
+    function getWidth(){}
-     */
-    function getWidth(){
-
-        var dom = document.querySelector('.do-sliders')
-        var width = window.getComputedStyle ? window.getComputedStyle(dom).width : dom.offsetWidth + 'px'
-        return width
-    }
 
     /**
      * [根据当前幻灯片索引获取填充底下按钮数据]
@@ -23,21 +16,22 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
      */
     function getBtnList(vm){
         var currWidth = vm.currWidth.slice(0, -2)
-        vm.maxNum = Math.floor(currWidth / 160)
+        vm.maxNum = Math.ceil(currWidth / 160)
         var curr = vm.curr + 1
+        let res = []
         if(!vm.preview)
-            return vm.sliderList
+            res = vm.sliderList
 
         if(vm.maxNum >= vm.sliderList.length){
-            return vm.sliderList
+            res = vm.sliderList
         }else{
             if(curr > vm.maxNum){
-                return vm.sliderList.slice(curr - vm.maxNum, curr)
+                res = vm.sliderList.slice(curr - vm.maxNum, curr)
             }else if(curr <= vm.maxNum){
-                return vm.sliderList.slice(0, vm.maxNum)
+                res = vm.sliderList.slice(0, vm.maxNum)
             }
         }
-        return vm.sliderList
+        return res
     }
 
     /**
@@ -46,7 +40,7 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
      * @return {[type]}    [description]
      */
     function autoSlide(vm){
-        vm.auto = setTimeout(function(){
+        vm.timer = setTimeout(function(){
             vm.$go(1)
             autoSlide(vm)
         }, vm.time)
@@ -76,7 +70,7 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
 
             vm.$stopSlide = function(){
                 if(vm.autoSlide){
-                    clearTimeout(vm.auto)
+                    clearTimeout(vm.timer)
                 }
             }
 
@@ -86,7 +80,8 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
             }
 
             vm.$setSliderList = function(list){
-                vm.sliderList = list
+                vm.sliderBtnList.removeAll()
+                vm.sliderList.pushArray(list)
             }
 
             vm.$watch('curr', function(val, old) {
@@ -96,8 +91,10 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
                     width = vm.currWidth.slice(0, vm.currWidth.indexOf('px'))
 
                 vm.transform = 'translate(' + (-width * val) + 'px, 0)'
-                if(vm.preview)
+                if(vm.preview && vm.maxNum < vm.sliderList.length){
-                    vm.sliderBtnList = getBtnList(vm)
+                    vm.sliderBtnList.removeAll()
+                    vm.sliderBtnList.pushArray(getBtnList(vm))
+                }
             })
 
             window.addEventListener('resize', function(){
@@ -107,31 +104,48 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
                     width = vm.currWidth.slice(0, vm.currWidth.indexOf('px'))
 
                 vm.transform = 'translate(' + (-width * vm.curr) + 'px, 0)'
-                if(vm.preview)
+                if(vm.preview && vm.maxNum < vm.sliderList.length){
-                    vm.sliderBtnList = getBtnList(vm)
+                    yua.log(vm.maxNum , vm.sliderList.length)
+                    vm.sliderBtnList.removeAll()
+                    vm.sliderBtnList.pushArray(getBtnList(vm))
+                }
             }, false)
 
             vm.$onSuccess(vm)
         },
         $ready: function(vm){
+            dom = document.querySelector('.do-sliders')
+
+            /**
+             * [获取当前幻灯片元素宽度]
+             */
+            getWidth = function(){
+
+                return window.getComputedStyle ? window.getComputedStyle(dom).width : dom.offsetWidth + 'px'
+            }
+
             vm.currWidth = getWidth()
             if(vm.autoSlide)
                 autoSlide(vm)
 
-            if(vm.preview)
+            if(vm.preview){
-                vm.sliderBtnList = getBtnList(vm)
+                vm.sliderBtnList.removeAll()
+                vm.sliderBtnList.pushArray(getBtnList(vm))
+            }
+            yua.log(vm)
         },
         currWidth: 0,
         transform: '',
         curr: 0,
         sliderBtnList: [],
         maxNum: 0,
-        auto: yua.noop,
+        timer: yua.noop,
 
         sliderList: [],
         autoSlide: '',
         time: 3000,
         preview: true,
+        skin: 'skin-0',
 
         $onSuccess: yua.noop,
         $setSliderList: yua.noop,
@@ -141,6 +155,6 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
         $go: yua.noop,
     })
 
-    yua.scan()
+    yua.scan(dom)
 
 })

js/lib/sliders/main.scss

@@ -7,42 +7,76 @@
  */
 
  @import "../../../css/var.scss";
+ // @import "../../../css/reset.scss";
 
 .do-sliders {position: relative;height: 100%;width: 100%;
-    
-    .container {position: relative;height: 100%;overflow: hidden;
-        .box {height: 100%;width: 100%;transition: .4s;
-            a {position:relative;display: inline-block;height: 100%;vertical-align: middle;
-                img {width: 100%;height: 100%;object-fit: cover;}
-                p.default-class {position: absolute;width: 30%;min-height: 30px;line-height: 30px;left: 0;bottom: 15%;right: 0;margin: auto;color: #fff;text-align: center;font-size: 25px;}
-            }
 
+    .slider-content{height: 75%;position: relative;
+
+        .container {position: relative;height: 100%;overflow: hidden;
+            .box {height: 100%;width: 100%;transition: .4s;
+                a {position:relative;display: inline-block;height: 100%;vertical-align: middle;
+                    img {width: 100%;height: 100%;object-fit: cover;}
+                    .title-class {position: absolute;width: 30%;min-height: 30px;line-height: 30px;left: 0;bottom: 15%;right: 0;margin: auto;text-align: center;font-size: 25px;}
+                    .elm{height: 100%;width: 100%;background: #333;}
+                    .default-elm{width: 100%;height: 100%;}
+                }
+
+            }
         }
+
+        .slider-btn {position: absolute;top: 50%;min-width: 50px;min-height: 50px;margin-top: -25px;text-decoration: none;font-size: 30px;line-height: 50px;text-align: center;border-radius: 100%;color: rgba(255,255,255,.6);font-weight: bold;z-index: 1;transition: .4s;}
+        // .slider-btn:hover {color: #fff;}
+        .slider-btn:nth-of-type(1){margin-left: 20px;}
+        // .slider-btn:nth-of-type(1):hover{animation: left-to-right .3s;}
+        .slider-btn:nth-of-type(2){right: 0;margin-right: 20px;}
+        // .slider-btn:nth-of-type(2):hover{animation: right-to-left .3s;}
     }
 
-    .slider-btn {position: absolute;top: 50%;min-width: 50px;min-height: 50px;margin-top: -25px;text-decoration: none;font-size: 30px;line-height: 50px;text-align: center;border-radius: 100%;color: rgba(255,255,255,.6);font-weight: bold;z-index: 1;transition: .4s;}
-    .slider-btn:hover {color: #fff;}
-    .slider-btn:nth-of-type(1){margin-left: 20px;}
-    // .slider-btn:nth-of-type(1):hover{animation: left-to-right .3s;}
-    .slider-btn:nth-of-type(2){right: 0;margin-right: 20px;}
-    // .slider-btn:nth-of-type(2):hover{animation: right-to-left .3s;}
 
-    .btn {position: absolute;bottom: -20px;width: 100%;min-height: 50px;max-height: 100px;margin: 0 auto;text-align: center;overflow: hidden;
+    .slider-preview-btn {position: relative;bottom: -5%;height: 20%;width: 100%;margin: 0 auto;text-align: center;overflow: hidden;
 
         span {display: inline-block;width: 10px;height: 10px;margin: 20px 5px;border-radius: 100%;background: rgba(255,255,255,0.8);cursor: pointer;transition: .5s;}
         span:hover{background:nth($cg, 1);}
         .no-preview-act{background:nth($cg, 3);}
 
-        
+
-        .btn-img{display: inline-block;position: relative;width: 150px;height: 100px;margin: 0 5px;transition: .4s;cursor: pointer;
+        .btn-img{display: inline-block;position: relative;width: 150px;height: 100%;margin: 0 5px;transition: .4s;cursor: pointer;
-            img {position: relative;width: 100%;height: 100%;transition: .4s;z-index: 2;}
+            img {position: relative;width: 100%;height: 100%;object-fit: cover;transition: .4s;z-index: 2;}
             .preview-act{transform: scale(.95)}
         }
-        .btn-img::after {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #1abc9c;opacity: 0;transition: .8s;z-index: 1;}
+        .btn-img .btn-background {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;transition: .8s;z-index: 1;}
-        .btn-img.act::after {opacity: 1;}
+        .btn-img.act .btn-background {opacity: 1;}
     }
+
+    &.skin-0 .title-class{color: #fff}
+    &.skin-1 .title-class{color: nth($cr, 3)}
+    &.skin-2 .title-class{color: nth($cg, 3)}
+    &.skin-3 .title-class{color: nth($cb, 3)}
+
+    &.skin-0 .slider-btn{color: rgba(255,255,255,.6)}
+    &.skin-1 .slider-btn{color: nth($cr, 3)}
+    &.skin-2 .slider-btn{color: nth($cg, 3)}
+    &.skin-3 .slider-btn{color: nth($cb, 3)}
+
+    &.skin-0 .slider-btn:hover{color: #fff}
+    &.skin-1 .slider-btn:hover{color: nth($cr, 1)}
+    &.skin-2 .slider-btn:hover{color: nth($cg, 1)}
+    &.skin-3 .slider-btn:hover{color: nth($cb, 1)}
+
+    &.skin-0 .btn-img .btn-background{background: #fff}
+    &.skin-1 .btn-img .btn-background{background: nth($cr, 1)}
+    &.skin-2 .btn-img .btn-background{background: nth($cg, 1)}
+    &.skin-3 .btn-img .btn-background{background: nth($cb, 1)}
+
+    &.skin-0 .default-elm{background: #fff}
+    &.skin-1 .default-elm{background: nth($cr, 1)}
+    &.skin-2 .default-elm{background: nth($cg, 1)}
+    &.skin-3 .default-elm{background: nth($cb, 1)}
+
 }
 
+
 @keyframes right-to-left{
     49% {-webkit-transform: translate(100%)}
     50% {-webkit-transform: translate(-100%);opacity: 0;}