优化幻灯片组件

js/lib/sliders/Readme.md

@@ -0,0 +1,48 @@
+# 幻灯片组件文档
+
+## 配置说明
+
+```json
+    {
+        
+        sliderList: [{src: '', link: '', title: '', titleStyle: ''}],       //src: 图片地址; link: 点击链接; title: 幻灯片标题(可以是文本或html); titleStyle: 标题样式
+        autoSlide: boolean,     //true: 自动轮播; false: 停止轮播
+        time: int,     //轮播间隔时间
+        preview: boolean   //是否有预览图
+    }
+
+```
+
+
+## 用法
+
+```html
+<div class="slider" :controller="test">
+    <template name="sliders" config="sliderOpts"></template>
+</div>
+<!--  
+其中config属性是指定分页组件的配置，会自动从上一层controller里找;
+其他的属性（除$id, config, id, class, tabindex, style, ms-*属性,data-*属性外，也可以用以配置组件，且优先级最高）;
+name属性可以设定组件的$id值，方便各模块之间进行通讯
+-->
+<!--  引入幻灯片组件  -->
+<script src="//dist.doui.cc/js/yua.js"></script>
+<script>
+    ;(function(yua){
+        require(['//doui.lt/js/lib/sliders/main.js'],function(){
+            var vm = yua({
+                $id: "test",
+                sliderOpts: {
+                    sliderList: [{src: '', link: '', title: '', titleStyle: ''}],
+                    autoSlide: false,
+                    time: 0,
+                    preview: true
+
+                }
+            })
+
+            yua.scan()
+        })
+    })(yua)
+</script>
+```

js/lib/sliders/main.css

@@ -0,0 +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}}

js/lib/sliders/main.htm

@@ -0,0 +1,41 @@
+<div class="do-sliders" :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"
+            :attr="{style: 'width: ' + sliderList.length * 100 + '%;' + transform}">
+            <a  target="_blank"
+                :repeat="sliderList"
+                :attr="{style: 'width: ' + currWidth + ';', href: el.link || 'javascript:;'}">
+                <img :attr="{src: el.src}">
+                <p :if="el.title" 
+                    :attr="{style: el.titlaStyle + ';' ? el.titleStyle : ';'}"
+                    :html="el.title"
+                    class="default-class"></p>
+            </a>
+        </div>
+    </div>
+
+    <div class="btn" :attr="{style: 'bottom:' + (preview ? '-120px' : '0;')}">
+        <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)}"
+            :click="$jump($index)"
+            :repeat="sliderBtnList">
+            <img
+                :class="{'preview-act': curr === $index ||  (curr >= maxNum && $index == maxNum - 1)}"
+                :attr-src="el.src" />
+        </a>
+    </div>
+
+    <a class="do-ui-font slider-btn" href="javascript:;"
+        :click="$go(1)">&#xe8eb</a>
+</div>

js/lib/sliders/main.js

@@ -0,0 +1,139 @@
+/**
+ *
+ * @authors linteng (875482941@qq.com)
+ * @date    2017-09-07 19:53:18
+ */
+
+define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
+
+    var auto
+
+    /**
+     * [获取当前幻灯片元素宽度]
+     */
+    function getWidth(){
+
+        var dom = document.querySelector('.do-sliders')
+        var width = window.getComputedStyle ? window.getComputedStyle(dom).width : dom.offsetWidth + 'px'
+        return width
+    }
+
+    /**
+     * [根据当前幻灯片索引获取填充底下按钮数据]
+     * @param  {Object} vm [vm对象]
+     * @return {[Array]}    [填充到按钮的数据]
+     */
+    function getBtnList(vm){
+        var currWidth = vm.currWidth.slice(0, -2)
+        vm.maxNum = Math.floor(currWidth / 160)
+        var curr = vm.curr + 1
+        if(!vm.preview)
+            return vm.sliderList
+
+        if(vm.maxNum >= vm.sliderList.length){
+            return vm.sliderList
+        }else{
+            if(curr > vm.maxNum){
+                return vm.sliderList.slice(curr - vm.maxNum, curr)
+            }else if(curr <= vm.maxNum){
+                return vm.sliderList.slice(0, vm.maxNum)
+            }
+        }
+        return vm.sliderList
+    }
+
+    /**
+     * [设置自动轮播]
+     * @param  {[type]} vm [description]
+     * @return {[type]}    [description]
+     */
+    function autoSlide(vm){
+        var timer = setInterval(function(){
+            vm.$go(1)
+        }, vm.time)
+        return timer
+    }
+
+    return yua.component("sliders", {
+        $template: tpl,
+        $init: function(vm){
+            vm.$go = function(num){
+                vm.curr += num
+                if(vm.curr < 0){
+                    vm.curr = vm.sliderList.length - 1
+                }else if(vm.curr > vm.sliderList.length - 1){
+                    vm.curr = 0
+                }
+            }
+
+            vm.$jump = function(i){
+                var curr = vm.curr + 1
+                if(curr > vm.maxNum && vm.preview){
+                    var distance = vm.maxNum - (i + 1)
+                    vm.curr -= distance
+                }else{
+                    vm.curr = i
+                }
+            }
+
+            vm.$stopSlide = function(){
+                if(vm.autoSlide){
+                    clearInterval(auto)
+                }
+            }
+
+            vm.$startSlide = function(){
+                if(vm.autoSlide)
+                    auto = autoSlide(vm)
+            }
+
+            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 = 'transform: translate(' + (-width * val) + 'px, 0);'
+                if(vm.preview)
+                    vm.sliderBtnList = getBtnList(vm)
+            })
+
+            window.addEventListener('resize', function(){
+                vm.currWidth = getWidth()
+                var width
+                if(vm.currWidth.indexOf('px') > -1)
+                    width = vm.currWidth.slice(0, vm.currWidth.indexOf('px'))
+
+                vm.transform = 'transform: translate(' + (-width * vm.curr) + 'px, 0);'
+                if(vm.preview)
+                    vm.sliderBtnList = getBtnList(vm)
+            }, false)
+
+        },
+        $ready: function(vm){
+            vm.currWidth = getWidth()
+            if(vm.autoSlide)
+                auto = autoSlide(vm)
+
+            vm.sliderBtnList = getBtnList(vm)
+        },
+        currWidth: 0,
+        transform: '',
+        curr: 0,
+        sliderBtnList: [],
+        maxNum: '',
+
+        sliderList: [],
+        autoSlide: '',
+        time: 3000,
+        preview: true,
+
+        $jump: yua.noop,
+        $stopSlide: yua.noop,
+        $startSlide: yua.noop,
+        $go: yua.noop,
+    })
+
+    yua.scan()
+
+})

js/lib/sliders/main.scss

@@ -0,0 +1,56 @@
+@charset "UTF-8";
+/**
+ *
+ * @authors Lincoln (875482941@qq.com)
+ * @date    2017-09-07 20:32:11
+ * @version $Id$
+ */
+
+ @import "../../../css/var.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-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;
+
+        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;
+            img {position: relative;width: 100%;height: 100%;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.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;}
+}

js/lib/sliders/sliders/main.css

@@ -1 +0,0 @@
-.do-sliders{position:relative;height:100%;width:100%;overflow:hidden}.do-sliders .box{height:100%;width:100%;transition:.4s}.do-sliders .slider-btn{position:absolute;top:50%;margin-top:-15px;width:30px;height:30px;text-decoration:none;font-size:30px;line-height:30px;text-align:center;border-radius:100%;background:rgba(0,0,0,0.2);color:#fff;z-index:1}.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:relative;bottom:50px;width:50%;height:50px;margin:0 auto;line-height:50px;text-align:center}.do-sliders .btn span{display:inline-block;width:10px;height:10px;margin:20px 10px;border-radius:100%;background:rgba(255,255,255,0.8);cursor:pointer;transition:.4s}.do-sliders .btn span:hover{background:#1abc9c}.do-sliders .btn .act{background:#16a085}.do-sliders section{display:inline-block;height:100%;vertical-align:middle}.do-sliders section img{width:100%;height:100%;object-fit:cover}

js/lib/sliders/sliders/main.htm

@@ -1,26 +0,0 @@
-<div class="do-sliders">
-    <a class="slider-btn" href="javascript:;"
-        :click="$go($event, -1)">{{leftButton ? leftButton : '<'}}</a>
-    <div class="box"
-        :attr="{style: 'width: ' + slideList.length * 100 + '%;' + transform}">
-        <section
-            :repeat="slideList"
-            :attr="{style: 'width: ' + currWidth}">
-            <img
-                :attr="{src: el.src}">
-            <span
-                :if="el.title">{{el.title}}</span>
-        </section>
-    </div>
-
-    <div class="btn">
-        <span
-            href="javascript:;"
-            :class="{act: curr === $index}"
-            :repeat="slideList"
-            :click="$jump($event, $index)"></span>
-    </div>
-
-    <a class="slider-btn" href="javascript:;"
-        :click="$go($event, 1)">{{rightButton ? rightButton : '>'}}</a>
-</div>

js/lib/sliders/sliders/main.js

@@ -1,74 +0,0 @@
-/**
- *
- * @authors linteng (875482941@qq.com)
- * @date    2017-09-07 19:53:18
- */
-
-define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
-
-    function setWidth(){
-
-        var dom = document.querySelector('.do-sliders')
-        var width = window.getComputedStyle ? window.getComputedStyle(dom).width : dom.offsetWidth + 'px'
-        return width
-    }
-
-    return yua.component("sliders", {
-        $template: tpl,
-        $construct: function(a, b, c){
-            yua.mix(a, b, c)
-            return a
-        },
-        $init: function(vm){
-            vm.slideList = [{src: '../test/images/1.jpeg'}, {src: '../test/images/2.jpg'}, {src: '../test/images/3.jpeg'}, {src: '../test/images/4.jpeg'}]
-            vm.$go = function(ev, num){
-                vm.curr += num
-                if(vm.curr < 0){
-                    vm.curr = vm.slideList.length - 1
-                }else if(vm.curr > vm.slideList.length - 1){
-                    vm.curr = 0
-                }
-            }
-
-            vm.$jump = function(ev, i){
-                vm.curr = i
-            }
-
-
-            vm.$watch('curr', function(val, old) {
-                vm.currWidth = setWidth()
-                var width
-                if(vm.currWidth.indexOf('px') > -1)
-                    width = vm.currWidth.slice(0, vm.currWidth.indexOf('px'))
-
-                vm.transform = 'transform: translate(' + (-width * val) + 'px, 0);'
-            })
-
-            window.addEventListener('resize', function(){
-                vm.currWidth = setWidth()
-                var width
-                if(vm.currWidth.indexOf('px') > -1)
-                    width = vm.currWidth.slice(0, vm.currWidth.indexOf('px'))
-
-                vm.transform = 'transform: translate(' + (-width * vm.curr) + 'px, 0);'
-            }, false)
-
-        },
-        $ready: function(vm){
-            vm.currWidth = setWidth()
-        },
-        slideList: [],
-        curr: 0,
-        currWidth: 0,
-        transform: '',
-        $jump: function(ev, i){
-
-        },
-        $go: yua.noop,
-        leftButton: '',
-        rightButton: ''
-    })
-
-    yua.scan()
-
-})

js/lib/sliders/sliders/main.scss

@@ -1,31 +0,0 @@
-@charset "UTF-8";
-/**
- *
- * @authors Lincoln (875482941@qq.com)
- * @date    2017-09-07 20:32:11
- * @version $Id$
- */
-
-@import "../../../css/var.scss";
-
-.do-sliders {position: relative;height: 100%;width: 100%;overflow: hidden;
-
-    .box {height: 100%;width: 100%;transition: .4s;}
-
-    .slider-btn {position: absolute;top: 50%;margin-top: -15px;width: 30px;height: 30px;text-decoration: none;font-size: 30px;line-height: 30px;text-align: center;border-radius: 100%;background: rgba(0,0,0,.2);color: #fff;z-index: 1;}
-    .slider-btn:nth-of-type(1){margin-left: 20px;}
-    .slider-btn:nth-of-type(2){right: 0;margin-right: 20px;}
-
-    .btn {position: relative;bottom: 50px;width: 50%;height: 50px;margin: 0 auto;line-height: 50px;text-align: center;
-
-        span {display: inline-block;width: 10px;height: 10px;margin: 20px 10px;border-radius: 100%;background: rgba(255,255,255,0.8);cursor: pointer;transition: .4s;}
-        span:hover{background:nth($cg, 1);}
-        .act{background:nth($cg, 3);}
-    }
-
-    section {display: inline-block;height: 100%;vertical-align: middle;
-
-        img {width: 100%;height: 100%;object-fit: cover;}
-
-    }
-}

js/lib/sliders/sliders/test/index.html

@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-<title>Examples</title>
-<meta name="description" content="">
-<meta name="keywords" content="">
-<link href="" rel="stylesheet">
-<link href="../../../../css/reset.css" rel="stylesheet">
-</head>
-<style type="text/css">
-    .slider{width: 80%;height: 400px;margin: 0 auto;}
-</style>
-<body>
-    <div class="slider" :controller="test">
-        <template name="sliders" config="sliderOpts"></template>
-    </div>
-    <script src="../../../../js/yua.js"></script>
-    <script>
-        ;(function(yua){
-            require(['/lib/sliders/main.js'],function(){
-                var vm = yua({
-                    $id: "test",
-                    sliderOpts: {
-                        total: 10,
-                        curr: 0
-                    }
-                })
-
-                yua.scan()
-            })
-        })(yua)
-    </script>
-</body>
-</html>