新增渐进渐出与滑动动画选项，优化代码

js/lib/sliders/Readme.md

@@ -7,7 +7,13 @@
         sliderList: [{src: '', link: '', title: '', titleStyle: ''}],       //src: 图片地址; link: 点击链接; title: 幻灯片标题(可以是文本或html); titleStyle: 标题样式
         autoSlide: boolean,     //true: 自动轮播; false: 停止轮播
         time: int,     //轮播间隔时间
-        preview: boolean   //是否有预览图
+        preview: boolean   //是否缩略有图
+        skin: 'skin-2',     //4种,默认0(0,1,2,3)
+        $onSuccess: function(vm){
+            slider = vm
+        },           //初始化回调
+        vm.$setSliderList(list),         //赋值数据给幻灯片数组
+        vm.$setSliderType(type)         //type改变幻灯片动画效果,目前有1: 滑动;2: 渐进渐出
     }
 
 ```
@@ -31,11 +37,15 @@ name属性可以设定组件的$id值，方便各模块之间进行通讯
         var vm = yua({
             $id: "test",
             sliderOpts: {
-                sliderList: [{src: '', link: '', title: '', titleStyle: ''}],
+                sliderList: [{src: '', link: '', title: '', elm: ''}],
                 autoSlide: false,
                 time: 0,
                 preview: true
-
+                skin: 'skin-2',
+                $onSuccess: function(vm){
+                    slider = vm
+                    slider.$setSliderList(list)
+                }
             }
         })
 

js/lib/sliders/main.css

@@ -1 +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}}
+.do-sliders{position:relative;height:100%;width:100%}.do-sliders .slider-content{height:80%;position:relative}.do-sliders .slider-content .container{position:relative;height:100%;overflow:hidden}.do-sliders .slider-content .container .box{position:relative;height:100%;width:100%;transition:.4s}.do-sliders .slider-content .container .box a{position:relative;display:inline-block;height:100%;vertical-align:middle;transition:.4s}.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 .container .box .fadeType{position:absolute;left:0;top:0;width: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:15%;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-group{height:100%}.do-sliders .slider-preview-btn .btn-img{display:inline-block;position:relative;width:80px;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:rgba(0,0,0,0.5)}.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}.do-sliders .h-80{height:80%}.do-sliders .h-100{height:100%}@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,12 +1,13 @@
 <div class="do-sliders" :class="{{skin}}">
 
-    <div class="slider-content" :if="sliderList.length" :mouseenter="$stopSlide()" :mouseleave="$startSlide()">
+    <div class="slider-content" :class="{'h-100': !preview}" :class="{'h-80': preview}" :if="sliderList.length" :mouseenter="$stopSlide()" :mouseleave="$startSlide()">
         <a class="do-ui-font slider-btn" href="javascript:;"
             :click="$go(-1)">&#xe8ed</a>
 
         <div class="container">
             <div class="box"
-                :css="{width: sliderList.length * 100 + '%', transform: transform}">
+                :if="sliderType == 1"
+                :css="{width: sliderList.length * 100 + '%', transform: animation}">
                 <a  target="_blank"
                     :repeat="sliderList"
                     :css="{width: currWidth}"
@@ -18,6 +19,20 @@
                         class="title-class"></p>
                 </a>
             </div>
+            <div class="box"
+                :if="sliderType == 2">
+                <a  target="_blank"
+                    class="fadeType"
+                    :repeat="sliderList"
+                    :css="{opacity: curr != $index ? 0 : 1}"
+                    :attr="{href: el.link || 'javascript:;'}">
+                    <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:;"
@@ -25,7 +40,8 @@
     </div>
 
 
-    <div class="slider-preview-btn">
+    <div class="slider-preview-btn"
+        :css="{bottom: preview ? '-5%' : '15%'}" >
         <span :if="!preview"
             href="javascript:;"
             :class="{'no-preview-act': curr === $index}"

js/lib/sliders/main.js

@@ -16,7 +16,7 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
      */
     function getBtnList(vm){
         var currWidth = vm.currWidth.slice(0, -2)
-        vm.maxNum = Math.ceil(currWidth / 160)
+        vm.maxNum = Math.floor(currWidth / 130)
         var curr = vm.curr + 1
         let res = []
         if(!vm.preview)
@@ -84,13 +84,18 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
                 vm.sliderList.pushArray(list)
             }
 
+            vm.$setSliderType = function(type){
+                vm.sliderType = type
+                yua.log(vm.sliderType)
+            }
+
             vm.$watch('curr', function(val, old) {
                 vm.currWidth = getWidth()
                 var width
                 if(vm.currWidth.indexOf('px') > -1)
                     width = vm.currWidth.slice(0, vm.currWidth.indexOf('px'))
 
-                vm.transform = 'translate(' + (-width * val) + 'px, 0)'
+                vm.animation = 'translate(' + (-width * val) + 'px, 0)'
                 if(vm.preview && vm.maxNum < vm.sliderList.length){
                     vm.sliderBtnList.removeAll()
                     vm.sliderBtnList.pushArray(getBtnList(vm))
@@ -103,7 +108,7 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
                 if(vm.currWidth.indexOf('px') > -1)
                     width = vm.currWidth.slice(0, vm.currWidth.indexOf('px'))
 
-                vm.transform = 'translate(' + (-width * vm.curr) + 'px, 0)'
+                vm.animation = 'translate(' + (-width * vm.curr) + 'px, 0)'
                 if(vm.preview && vm.maxNum < vm.sliderList.length){
                     yua.log(vm.maxNum , vm.sliderList.length)
                     vm.sliderBtnList.removeAll()
@@ -135,11 +140,12 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
             yua.log(vm)
         },
         currWidth: 0,
-        transform: '',
+        animation: '',
         curr: 0,
         sliderBtnList: [],
         maxNum: 0,
         timer: yua.noop,
+        sliderType: 1,
 
         sliderList: [],
         autoSlide: '',
@@ -149,6 +155,7 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
 
         $onSuccess: yua.noop,
         $setSliderList: yua.noop,
+        $setSliderType: yua.noop,
         $jump: yua.noop,
         $stopSlide: yua.noop,
         $startSlide: yua.noop,

js/lib/sliders/main.scss

@@ -10,18 +10,17 @@
  // @import "../../../css/reset.scss";
 
 .do-sliders {position: relative;height: 100%;width: 100%;
-
+    .slider-content{height: 80%;position: relative;
-    .slider-content{height: 75%;position: relative;
 
         .container {position: relative;height: 100%;overflow: hidden;
-            .box {height: 100%;width: 100%;transition: .4s;
+            .box {position: relative;height: 100%;width: 100%;transition: .4s;
-                a {position:relative;display: inline-block;height: 100%;vertical-align: middle;
+                a {position:relative;display: inline-block;height: 100%;vertical-align: middle;transition: .4s;
                     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%;}
                 }
-
+                .fadeType{position: absolute;left: 0;top: 0;width: 100%;}
             }
         }
 
@@ -34,14 +33,15 @@
     }
 
 
-    .slider-preview-btn {position: relative;bottom: -5%;height: 20%;width: 100%;margin: 0 auto;text-align: center;overflow: hidden;
+    .slider-preview-btn {position: relative;bottom: -5%;height: 15%;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-group{height: 100%;}
 
-        .btn-img{display: inline-block;position: relative;width: 150px;height: 100%;margin: 0 5px;transition: .4s;cursor: pointer;
+        .btn-img{display: inline-block;position: relative;width: 80px;height: 100%;margin: 0 5px;transition: .4s;cursor: pointer;
             img {position: relative;width: 100%;height: 100%;object-fit: cover;transition: .4s;z-index: 2;}
             .preview-act{transform: scale(.95)}
         }
@@ -64,7 +64,7 @@
     &.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-0 .btn-img .btn-background{background: rgba(0,0,0,0.5)}
     &.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)}
@@ -74,6 +74,8 @@
     &.skin-2 .default-elm{background: nth($cg, 1)}
     &.skin-3 .default-elm{background: nth($cb, 1)}
 
+    .h-80{height: 80%;}
+    .h-100{height: 100%;}
 }