diff --git a/js/lib/sliders/Readme.md b/js/lib/sliders/Readme.md index 099901f..70d9f81 100644 --- a/js/lib/sliders/Readme.md +++ b/js/lib/sliders/Readme.md @@ -4,16 +4,16 @@ ```json { - sliderList: [{src: '', link: '', title: '', titleStyle: ''}], //src: 图片地址; link: 点击链接; title: 幻灯片标题(可以是文本或html); titleStyle: 标题样式 + sliderList: [{src: '', title: '', link: '', elm: ''}], //src: 图片地址; link: 点击链接; title: 幻灯片标题(可以是文本或html); elm: 幻灯片中的dom元素 autoSlide: boolean, //true: 自动轮播; false: 停止轮播 - time: int, //轮播间隔时间 - preview: boolean //是否缩略有图 - skin: 'skin-2', //4种,默认0(0,1,2,3) + time: int, //自动轮播间隔时间 + preview: boolean //是否缩略有图(不适用于全屏) + skin: int, //4种,默认0(0,1,2,3) + sliderType: int, //幻灯片动画效果,目前有1: 水平滑动;2: 水平渐进渐出;3: 垂直滑动;4: 垂直渐进渐出 $onSuccess: function(vm){ slider = vm }, //初始化回调 vm.$setSliderList(list), //赋值数据给幻灯片数组 - vm.$setSliderType(type) //type改变幻灯片动画效果,目前有1: 滑动;2: 渐进渐出 } ``` @@ -40,8 +40,10 @@ name属性可以设定组件的$id值，方便各模块之间进行通讯 sliderList: [{src: '', link: '', title: '', elm: ''}], autoSlide: false, time: 0, - preview: true - skin: 'skin-2', + // preview: true, + fullScreen: true, + skin: 1, + sliderType: 4, $onSuccess: function(vm){ slider = vm slider.$setSliderList(list) diff --git a/js/lib/sliders/main.css b/js/lib/sliders/main.css index e4fa934..90f9a9b 100644 --- a/js/lib/sliders/main.css +++ b/js/lib/sliders/main.css @@ -1 +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}} +.do-sliders{position:relative;height:100%;width:100%}.do-sliders .skin{height:100%}.do-sliders.fullscreen{position:absolute;width:100%;height:100%;left:0;top:0}.do-sliders .slider-content{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 .page{position:relative;display:inline-block;height:100%;vertical-align:middle}.do-sliders .slider-content .container .box .page img{width:100%;height:100%;object-fit:cover}.do-sliders .slider-content .container .box .page .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 .page .elm{height:100%;width:100%;background:#333}.do-sliders .slider-content .container .box .page .default-elm{width:100%;height:100%}.do-sliders .slider-content .container .box .page .default-btn{width:100%;height:100%}.do-sliders .slider-content .container .box .fadeType{position:absolute;left:0;top:0;width:100%;transition:.4s}.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:absolute;bottom:2%;height:12%;width:100%;margin:0 auto;text-align:center;overflow:hidden}.do-sliders .slider-preview-btn span{display:inline-block;width:10px;height:10px;margin:0 5px;border-radius:100%;background:rgba(255,255,255,0.8);cursor:pointer;transition:.5s}.do-sliders .slider-preview-btn span:hover{background:#4caf50}.do-sliders .slider-preview-btn .no-preview-act{background:#388e3c}.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:after{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:after{opacity:1}.do-sliders .slider-preview-btn-vertical{right:10px;bottom:50%;width:20px;height:auto;text-align:center;transform:translate(0, 50%)}.do-sliders .skin-0 .title-class{color:#e0e0e0}.do-sliders .skin-1 .title-class{color:#e64a19}.do-sliders .skin-2 .title-class{color:#388e3c}.do-sliders .skin-3 .title-class{color:#1976d2}.do-sliders .skin-0 .slider-btn{color:rgba(255,255,255,0.6)}.do-sliders .skin-1 .slider-btn{color:#e64a19}.do-sliders .skin-2 .slider-btn{color:#388e3c}.do-sliders .skin-3 .slider-btn{color:#1976d2}.do-sliders .skin-0 .slider-btn:hover{color:#e0e0e0}.do-sliders .skin-1 .slider-btn:hover{color:#ff5722}.do-sliders .skin-2 .slider-btn:hover{color:#4caf50}.do-sliders .skin-3 .slider-btn:hover{color:#2196f3}.do-sliders .skin-0 .btn-img:after{background:rgba(0,0,0,0.5)}.do-sliders .skin-1 .btn-img:after{background:#ff5722}.do-sliders .skin-2 .btn-img:after{background:#4caf50}.do-sliders .skin-3 .btn-img:after{background:#2196f3}.do-sliders .skin-0 .default-elm{background:#e0e0e0}.do-sliders .skin-1 .default-elm{background:#ff5722}.do-sliders .skin-2 .default-elm{background:#4caf50}.do-sliders .skin-3 .default-elm{background:#2196f3}.do-sliders .skin-0 .default-btn{background:#e0e0e0}.do-sliders .skin-1 .default-btn{background:#ff5722}.do-sliders .skin-2 .default-btn{background:#4caf50}.do-sliders .skin-3 .default-btn{background:#2196f3}.do-sliders .skin-0 .no-preview-act{background:rgba(0,0,0,0.6)}.do-sliders .skin-1 .no-preview-act{background:#e64a19}.do-sliders .skin-2 .no-preview-act{background:#388e3c}.do-sliders .skin-3 .no-preview-act{background:#1976d2}.do-sliders .skin-0 .slider-preview-btn span:hover{background:rgba(0,0,0,0.6)}.do-sliders .skin-1 .slider-preview-btn span:hover{background:#e64a19}.do-sliders .skin-2 .slider-preview-btn span:hover{background:#388e3c}.do-sliders .skin-3 .slider-preview-btn span:hover{background:#1976d2}.do-sliders .h-83{height:83%}.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}} diff --git a/js/lib/sliders/main.htm b/js/lib/sliders/main.htm index 8f4a23e..5003a44 100644 --- a/js/lib/sliders/main.htm +++ b/js/lib/sliders/main.htm @@ -1,64 +1,95 @@ -
- 12 -
- +
+
-
-
- - -
-

- -
-
- - -
-

- +
+ + +
+
+ + +

+ +
+
+ + + +

+ +
+
+ + +

+ +
+
+ + + {{el.elm | html}} +

+ +
+ +
- -
+
+ + -
- - - - - -
- + + +
+ +
diff --git a/js/lib/sliders/main.js b/js/lib/sliders/main.js index d0695ac..a164499 100644 --- a/js/lib/sliders/main.js +++ b/js/lib/sliders/main.js @@ -7,16 +7,19 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){ var dom; - function getWidth(){} + var sliderNum = 0; + var skin = ['skin-0','skin-1','skin-2','skin-3'] /** * [根据当前幻灯片索引获取填充底下按钮数据] * @param {Object} vm [vm对象] * @return {[Array]} [填充到按钮的数据] */ - function getBtnList(vm){ - var currWidth = vm.currWidth.slice(0, -2) - vm.maxNum = Math.floor(currWidth / 130) + function getBtnList(vm, el){ + if(el){ + dom = el + } + vm.maxNum = Math.floor(dom.offsetWidth / 90) var curr = vm.curr + 1 let res = [] if(!vm.preview) @@ -43,7 +46,7 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){ vm.timer = setTimeout(function(){ vm.$go(1) autoSlide(vm) - }, vm.time) + }, vm.time <= 0 ? 3000 : vm.time) } return yua.component("sliders", { @@ -84,60 +87,53 @@ 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.animation = 'translate(' + (-width * val) + 'px, 0)' - if(vm.preview && vm.maxNum < vm.sliderList.length){ - vm.sliderBtnList.removeAll() - vm.sliderBtnList.pushArray(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.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() - 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() + $ready: function(vm, el){ + vm.skin = skin[vm.skin] + vm.currWidth = (100 / vm.sliderList.length) if(vm.autoSlide) autoSlide(vm) if(vm.preview){ vm.sliderBtnList.removeAll() - vm.sliderBtnList.pushArray(getBtnList(vm)) + vm.sliderBtnList.pushArray(getBtnList(vm, el)) + } + + vm.$watch('curr', function(val, old) { + + vm.animation = vm.sliderType > 2 ? 'translate(0, ' + (-vm.currWidth * val) + '%)' : 'translate(' + (-vm.currWidth * val) + '%, 0)' + if(vm.preview && vm.maxNum < vm.sliderList.length){ + vm.sliderBtnList.removeAll() + vm.sliderBtnList.pushArray(getBtnList(vm, el)) + } + }) + + window.addEventListener('resize', function(){ + + vm.animation = vm.sliderType > 2 ? 'translate(0, ' + (-vm.currWidth * vm.curr) + '%)' : 'translate(' + (-vm.currWidth * vm.curr) + '%, 0)' + if(vm.preview && vm.maxNum < vm.sliderList.length){ + vm.sliderBtnList.removeAll() + vm.sliderBtnList.pushArray(getBtnList(vm, el)) + } + }, false) + + if(vm.sliderType >= 3){ + var now = 0 + var mouseWheelEv = /Firefox/i.test(navigator.userAgent) ? "DOMMouseScroll": "mousewheel" + var direction = /Firefox/i.test(navigator.userAgent) ? "detail": "deltaY" + window.addEventListener(mouseWheelEv, function(ev){ + if(Date.now() - now > 500 || now == 0){ + + if(ev[direction] > 0){ + vm.$go(1) + }else{ + vm.$go(-1) + } + now = Date.now() + } + }, false) } - yua.log(vm) }, currWidth: 0, animation: '', @@ -150,12 +146,12 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){ sliderList: [], autoSlide: '', time: 3000, - preview: true, - skin: 'skin-0', + preview: false, + skin: 0, + fullScreen: false, $onSuccess: yua.noop, $setSliderList: yua.noop, - $setSliderType: yua.noop, $jump: yua.noop, $stopSlide: yua.noop, $startSlide: yua.noop, diff --git a/js/lib/sliders/main.scss b/js/lib/sliders/main.scss index a075803..e313d9c 100644 --- a/js/lib/sliders/main.scss +++ b/js/lib/sliders/main.scss @@ -10,17 +10,20 @@ // @import "../../../css/reset.scss"; .do-sliders {position: relative;height: 100%;width: 100%; - .slider-content{height: 80%;position: relative; + .skin{height: 100%} + &.fullscreen{position: absolute;width: 100%;height: 100%;left: 0;top: 0;} + .slider-content{position: relative; .container {position: relative;height: 100%;overflow: hidden; .box {position: relative;height: 100%;width: 100%;transition: .4s; - a {position:relative;display: inline-block;height: 100%;vertical-align: middle;transition: .4s; + .page {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%;} + .default-btn{width: 100%;height: 100%;} } - .fadeType{position: absolute;left: 0;top: 0;width: 100%;} + .fadeType{position: absolute;left: 0;top: 0;width: 100%;transition: .4s;} } } @@ -32,10 +35,9 @@ // .slider-btn:nth-of-type(2):hover{animation: right-to-left .3s;} } + .slider-preview-btn {position: absolute;bottom: 2%;height: 12%;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 {display: inline-block;width: 10px;height: 10px;margin: 0 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);} @@ -45,36 +47,52 @@ img {position: relative;width: 100%;height: 100%;object-fit: cover;transition: .4s;z-index: 2;} .preview-act{transform: scale(.95)} } - .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 .btn-background {opacity: 1;} + .btn-img:after {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;transition: .8s;z-index: 1;} + .btn-img.act:after {opacity: 1;} } + .slider-preview-btn-vertical{right: 10px;bottom: 50%;width: 20px;height: auto;text-align: center;transform: translate(0, 50%);} - &.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 .title-class{color: #e0e0e0} + .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{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 .slider-btn:hover{color: #e0e0e0} + .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: 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)} + .skin-0 .btn-img:after{background: rgba(0,0,0,0.5)} + .skin-1 .btn-img:after{background: nth($cr, 1)} + .skin-2 .btn-img:after{background: nth($cg, 1)} + .skin-3 .btn-img:after{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)} + .skin-0 .default-elm{background: #e0e0e0} + .skin-1 .default-elm{background: nth($cr, 1)} + .skin-2 .default-elm{background: nth($cg, 1)} + .skin-3 .default-elm{background: nth($cb, 1)} - .h-80{height: 80%;} + .skin-0 .default-btn{background: #e0e0e0} + .skin-1 .default-btn{background: nth($cr, 1)} + .skin-2 .default-btn{background: nth($cg, 1)} + .skin-3 .default-btn{background: nth($cb, 1)} + + .skin-0 .no-preview-act{background: rgba(0,0,0,.6)} + .skin-1 .no-preview-act{background: nth($cr, 3)} + .skin-2 .no-preview-act{background: nth($cg, 3)} + .skin-3 .no-preview-act{background: nth($cb, 3)} + + .skin-0 .slider-preview-btn span:hover{background: rgba(0,0,0,.6)} + .skin-1 .slider-preview-btn span:hover{background: nth($cr, 3)} + .skin-2 .slider-preview-btn span:hover{background: nth($cg, 3)} + .skin-3 .slider-preview-btn span:hover{background: nth($cb, 3)} + + .h-83{height: 83%;} .h-100{height: 100%;} }