diff --git a/js/lib/sliders/main.css b/js/lib/sliders/main.css index 73f3dfd..d3b3dc4 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 .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}} diff --git a/js/lib/sliders/main.htm b/js/lib/sliders/main.htm index 9542da7..2eda76f 100644 --- a/js/lib/sliders/main.htm +++ b/js/lib/sliders/main.htm @@ -1,30 +1,38 @@ -
- +
-
-
- - -

- +
+ + +
+
+ + +
+

+ +
+ +
-
+ +
- + +
- -
\ No newline at end of file diff --git a/js/lib/sliders/main.js b/js/lib/sliders/main.js index 418f088..483d071 100644 --- a/js/lib/sliders/main.js +++ b/js/lib/sliders/main.js @@ -6,15 +6,8 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){ - /** - * [获取当前幻灯片元素宽度] - */ - function getWidth(){ - - var dom = document.querySelector('.do-sliders') - var width = window.getComputedStyle ? window.getComputedStyle(dom).width : dom.offsetWidth + 'px' - return width - } + var dom + function getWidth(){} /** * [根据当前幻灯片索引获取填充底下按钮数据] @@ -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) - vm.sliderBtnList = getBtnList(vm) + if(vm.preview && vm.maxNum < vm.sliderList.length){ + 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) - vm.sliderBtnList = getBtnList(vm) + 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() if(vm.autoSlide) autoSlide(vm) - if(vm.preview) - vm.sliderBtnList = getBtnList(vm) + if(vm.preview){ + 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) }) \ No newline at end of file diff --git a/js/lib/sliders/main.scss b/js/lib/sliders/main.scss index 5a44de6..0f24160 100644 --- a/js/lib/sliders/main.scss +++ b/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; - img {position: relative;width: 100%;height: 100%;transition: .4s;z-index: 2;} + + .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%;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.act::after {opacity: 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 .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;}