增加水平/垂直全屏滚动选项,优化部分代码
linteng
parent
71d7ab4419
commit
1f6d4ebc82
|
|
@ -4,16 +4,16 @@
|
||||||
|
|
||||||
```json
|
```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: 停止轮播
|
autoSlide: boolean, //true: 自动轮播; false: 停止轮播
|
||||||
time: int, //轮播间隔时间
|
time: int, //自动轮播间隔时间
|
||||||
preview: boolean //是否缩略有图
|
preview: boolean //是否缩略有图(不适用于全屏)
|
||||||
skin: 'skin-2', //4种,默认0(0,1,2,3)
|
skin: int, //4种,默认0(0,1,2,3)
|
||||||
|
sliderType: int, //幻灯片动画效果,目前有1: 水平滑动;2: 水平渐进渐出;3: 垂直滑动;4: 垂直渐进渐出
|
||||||
$onSuccess: function(vm){
|
$onSuccess: function(vm){
|
||||||
slider = vm
|
slider = vm
|
||||||
}, //初始化回调
|
}, //初始化回调
|
||||||
vm.$setSliderList(list), //赋值数据给幻灯片数组
|
vm.$setSliderList(list), //赋值数据给幻灯片数组
|
||||||
vm.$setSliderType(type) //type改变幻灯片动画效果,目前有1: 滑动;2: 渐进渐出
|
|
||||||
}
|
}
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
@ -40,8 +40,10 @@ name属性可以设定组件的$id值，方便各模块之间进行通讯
|
||||||
sliderList: [{src: '', link: '', title: '', elm: ''}],
|
sliderList: [{src: '', link: '', title: '', elm: ''}],
|
||||||
autoSlide: false,
|
autoSlide: false,
|
||||||
time: 0,
|
time: 0,
|
||||||
preview: true
|
// preview: true,
|
||||||
skin: 'skin-2',
|
fullScreen: true,
|
||||||
|
skin: 1,
|
||||||
|
sliderType: 4,
|
||||||
$onSuccess: function(vm){
|
$onSuccess: function(vm){
|
||||||
slider = vm
|
slider = vm
|
||||||
slider.$setSliderList(list)
|
slider.$setSliderList(list)
|
||||||
|
|
|
||||||
|
|
@ -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}}
|
||||||
|
|
|
||||||
|
|
@ -1,64 +1,95 @@
|
||||||
<div class="do-sliders" :class="{{skin}}">
|
<div class="do-sliders" :class="{fullscreen: fullScreen}">
|
||||||
12
|
<div class="skin" :class="{{skin}}">
|
||||||
<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)"></a>
|
|
||||||
|
|
||||||
<div class="container">
|
<div class="slider-content" :class="{'h-83': preview && !fullScreen, 'h-100': !preview || fullScreen}" :if="sliderList.length" :mouseenter="$stopSlide()" :mouseleave="$startSlide()">
|
||||||
<div class="box"
|
<a class="do-ui-font slider-btn" href="javascript:;"
|
||||||
:if="sliderType == 1"
|
:if="sliderType < 3"
|
||||||
:css="{width: sliderList.length * 100 + '%', transform: animation}">
|
:click="$go(-1)"></a>
|
||||||
<a target="_blank"
|
|
||||||
:repeat="sliderList"
|
<div class="container">
|
||||||
:css="{width: currWidth}"
|
<div class="box"
|
||||||
:attr="{href: el.link || 'javascript:;'}">
|
:if="sliderType == 1"
|
||||||
<img :if="el.src && el.src != ''" :attr-src="el.src">
|
:css="{width: sliderList.length * 100 + '%', transform: animation}">
|
||||||
<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>
|
<a class="page" target="_blank"
|
||||||
<p :if="el.title"
|
:repeat="sliderList"
|
||||||
:html="el.title"
|
:css="{width: currWidth + '%'}"
|
||||||
class="title-class"></p>
|
:attr="{href: el.link || 'javascript:;'}">
|
||||||
</a>
|
<img :if="el.src && el.src != ''" :attr-src="el.src">
|
||||||
</div>
|
<p :if="el.title"
|
||||||
<div class="box"
|
:html="el.title"
|
||||||
:if="sliderType == 2">
|
class="title-class"></p>
|
||||||
<a target="_blank"
|
</a>
|
||||||
class="fadeType"
|
</div>
|
||||||
:repeat="sliderList"
|
<div class="box"
|
||||||
:css="{opacity: curr != $index ? 0 : 1}"
|
:if="sliderType == 2">
|
||||||
:attr="{href: el.link || 'javascript:;'}">
|
<a target="_blank"
|
||||||
<img :if="el.src && el.src != ''" :attr-src="el.src">
|
class="page fadeType"
|
||||||
<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>
|
:repeat="sliderList"
|
||||||
<p :if="el.title"
|
:css="{opacity: curr != $index ? 0 : 1}"
|
||||||
:html="el.title"
|
:attr="{href: el.link || 'javascript:;'}">
|
||||||
class="title-class"></p>
|
<img :if="el.src && el.src != ''" :attr-src="el.src">
|
||||||
</a>
|
|
||||||
|
<p :if="el.title"
|
||||||
|
:html="el.title"
|
||||||
|
class="title-class"></p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="box"
|
||||||
|
:if="sliderType == 3"
|
||||||
|
:css="{height: sliderList.length * 100 + '%', transform: animation}">
|
||||||
|
<a class="page" target="_blank"
|
||||||
|
:repeat="sliderList"
|
||||||
|
:css="{width: '100%', height: (100 / sliderList.length) + '%'}"
|
||||||
|
:attr="{href: el.link || 'javascript:;'}">
|
||||||
|
<img :if="el.src && el.src != ''" :attr-src="el.src">
|
||||||
|
<p :if="el.title"
|
||||||
|
:html="el.title"
|
||||||
|
class="title-class"></p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="box"
|
||||||
|
:if="sliderType == 4">
|
||||||
|
<a target="_blank"
|
||||||
|
class="page fadeType"
|
||||||
|
:repeat="sliderList"
|
||||||
|
:css="{opacity: curr != $index ? 0 : 1}"
|
||||||
|
:attr="{href: el.link || 'javascript:;'}">
|
||||||
|
<img :if="el.src && el.src != ''" :attr-src="el.src">
|
||||||
|
{{el.elm | html}}
|
||||||
|
<p :if="el.title"
|
||||||
|
:html="el.title"
|
||||||
|
class="title-class"></p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<a class="do-ui-font slider-btn" href="javascript:;"
|
||||||
|
:if="sliderType < 3"
|
||||||
|
:click="$go(1)"></a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a class="do-ui-font slider-btn" href="javascript:;"
|
|
||||||
:click="$go(1)"></a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<div class="slider-preview-btn"
|
||||||
|
:class="{'slider-preview-btn-vertical': sliderType > 2}"
|
||||||
|
:css="{padding: !preview && sliderType < 3 ? '2%' : ''}" >
|
||||||
|
<span href="javascript:;"
|
||||||
|
:if="!preview || fullScreen"
|
||||||
|
:class="{'no-preview-act': curr === $index}"
|
||||||
|
:repeat="sliderList"
|
||||||
|
:click="$jump($index)">
|
||||||
|
</span>
|
||||||
|
|
||||||
<div class="slider-preview-btn"
|
<a class="btn-img" href="javascript:;"
|
||||||
:css="{bottom: preview ? '-5%' : '15%'}" >
|
:if="preview && !fullScreen"
|
||||||
<span :if="!preview"
|
:class="{act: curr === $index || (curr >= maxNum && $index == maxNum - 1), 'default-btn': !el.src}"
|
||||||
href="javascript:;"
|
:click="$jump($index)"
|
||||||
:class="{'no-preview-act': curr === $index}"
|
:repeat="sliderBtnList">
|
||||||
:repeat="sliderList"
|
<img
|
||||||
:click="$jump($index)">
|
:class="{'preview-act': curr === $index || (curr >= maxNum && $index == maxNum - 1)}"
|
||||||
</span>
|
:if="el.src && el.src != ''"
|
||||||
|
:attr-src="el.src" />
|
||||||
<a class="btn-img" href="javascript:;"
|
<div class="btn-background" ms-if="el.src"></div>
|
||||||
:if="preview"
|
</a>
|
||||||
:class="{act: curr === $index || (curr >= maxNum && $index == maxNum - 1)}"
|
</div>
|
||||||
:click="$jump($index)"
|
|
||||||
: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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -7,16 +7,19 @@
|
||||||
define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
|
define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
|
||||||
|
|
||||||
var dom;
|
var dom;
|
||||||
function getWidth(){}
|
var sliderNum = 0;
|
||||||
|
var skin = ['skin-0','skin-1','skin-2','skin-3']
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [根据当前幻灯片索引获取填充底下按钮数据]
|
* [根据当前幻灯片索引获取填充底下按钮数据]
|
||||||
* @param {Object} vm [vm对象]
|
* @param {Object} vm [vm对象]
|
||||||
* @return {[Array]} [填充到按钮的数据]
|
* @return {[Array]} [填充到按钮的数据]
|
||||||
*/
|
*/
|
||||||
function getBtnList(vm){
|
function getBtnList(vm, el){
|
||||||
var currWidth = vm.currWidth.slice(0, -2)
|
if(el){
|
||||||
vm.maxNum = Math.floor(currWidth / 130)
|
dom = el
|
||||||
|
}
|
||||||
|
vm.maxNum = Math.floor(dom.offsetWidth / 90)
|
||||||
var curr = vm.curr + 1
|
var curr = vm.curr + 1
|
||||||
let res = []
|
let res = []
|
||||||
if(!vm.preview)
|
if(!vm.preview)
|
||||||
|
|
@ -43,7 +46,7 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
|
||||||
vm.timer = setTimeout(function(){
|
vm.timer = setTimeout(function(){
|
||||||
vm.$go(1)
|
vm.$go(1)
|
||||||
autoSlide(vm)
|
autoSlide(vm)
|
||||||
}, vm.time)
|
}, vm.time <= 0 ? 3000 : vm.time)
|
||||||
}
|
}
|
||||||
|
|
||||||
return yua.component("sliders", {
|
return yua.component("sliders", {
|
||||||
|
|
@ -84,60 +87,53 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
|
||||||
vm.sliderList.pushArray(list)
|
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)
|
vm.$onSuccess(vm)
|
||||||
},
|
},
|
||||||
$ready: function(vm){
|
$ready: function(vm, el){
|
||||||
dom = document.querySelector('.do-sliders')
|
vm.skin = skin[vm.skin]
|
||||||
|
vm.currWidth = (100 / vm.sliderList.length)
|
||||||
/**
|
|
||||||
* [获取当前幻灯片元素宽度]
|
|
||||||
*/
|
|
||||||
getWidth = function(){
|
|
||||||
|
|
||||||
return window.getComputedStyle ? window.getComputedStyle(dom).width : dom.offsetWidth + 'px'
|
|
||||||
}
|
|
||||||
|
|
||||||
vm.currWidth = getWidth()
|
|
||||||
if(vm.autoSlide)
|
if(vm.autoSlide)
|
||||||
autoSlide(vm)
|
autoSlide(vm)
|
||||||
|
|
||||||
if(vm.preview){
|
if(vm.preview){
|
||||||
vm.sliderBtnList.removeAll()
|
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,
|
currWidth: 0,
|
||||||
animation: '',
|
animation: '',
|
||||||
|
|
@ -150,12 +146,12 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
|
||||||
sliderList: [],
|
sliderList: [],
|
||||||
autoSlide: '',
|
autoSlide: '',
|
||||||
time: 3000,
|
time: 3000,
|
||||||
preview: true,
|
preview: false,
|
||||||
skin: 'skin-0',
|
skin: 0,
|
||||||
|
fullScreen: false,
|
||||||
|
|
||||||
$onSuccess: yua.noop,
|
$onSuccess: yua.noop,
|
||||||
$setSliderList: yua.noop,
|
$setSliderList: yua.noop,
|
||||||
$setSliderType: yua.noop,
|
|
||||||
$jump: yua.noop,
|
$jump: yua.noop,
|
||||||
$stopSlide: yua.noop,
|
$stopSlide: yua.noop,
|
||||||
$startSlide: yua.noop,
|
$startSlide: yua.noop,
|
||||||
|
|
|
||||||
|
|
@ -10,17 +10,20 @@
|
||||||
// @import "../../../css/reset.scss";
|
// @import "../../../css/reset.scss";
|
||||||
|
|
||||||
.do-sliders {position: relative;height: 100%;width: 100%;
|
.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;
|
.container {position: relative;height: 100%;overflow: hidden;
|
||||||
.box {position: relative;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;transition: .4s;
|
.page {position:relative;display: inline-block;height: 100%;vertical-align: middle;
|
||||||
img {width: 100%;height: 100%;object-fit: cover;}
|
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;}
|
.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;}
|
.elm{height: 100%;width: 100%;background: #333;}
|
||||||
.default-elm{width: 100%;height: 100%;}
|
.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-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: 0 5px;border-radius: 100%;background: rgba(255,255,255,0.8);cursor: pointer;transition: .5s;}
|
||||||
|
|
||||||
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);}
|
span:hover{background:nth($cg, 1);}
|
||||||
.no-preview-act{background:nth($cg, 3);}
|
.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;}
|
img {position: relative;width: 100%;height: 100%;object-fit: cover;transition: .4s;z-index: 2;}
|
||||||
.preview-act{transform: scale(.95)}
|
.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:after {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.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-0 .title-class{color: #e0e0e0}
|
||||||
&.skin-1 .title-class{color: nth($cr, 3)}
|
.skin-1 .title-class{color: nth($cr, 3)}
|
||||||
&.skin-2 .title-class{color: nth($cg, 3)}
|
.skin-2 .title-class{color: nth($cg, 3)}
|
||||||
&.skin-3 .title-class{color: nth($cb, 3)}
|
.skin-3 .title-class{color: nth($cb, 3)}
|
||||||
|
|
||||||
&.skin-0 .slider-btn{color: rgba(255,255,255,.6)}
|
.skin-0 .slider-btn{color: rgba(255,255,255,.6)}
|
||||||
&.skin-1 .slider-btn{color: nth($cr, 3)}
|
.skin-1 .slider-btn{color: nth($cr, 3)}
|
||||||
&.skin-2 .slider-btn{color: nth($cg, 3)}
|
.skin-2 .slider-btn{color: nth($cg, 3)}
|
||||||
&.skin-3 .slider-btn{color: nth($cb, 3)}
|
.skin-3 .slider-btn{color: nth($cb, 3)}
|
||||||
|
|
||||||
&.skin-0 .slider-btn:hover{color: #fff}
|
.skin-0 .slider-btn:hover{color: #e0e0e0}
|
||||||
&.skin-1 .slider-btn:hover{color: nth($cr, 1)}
|
.skin-1 .slider-btn:hover{color: nth($cr, 1)}
|
||||||
&.skin-2 .slider-btn:hover{color: nth($cg, 1)}
|
.skin-2 .slider-btn:hover{color: nth($cg, 1)}
|
||||||
&.skin-3 .slider-btn:hover{color: nth($cb, 1)}
|
.skin-3 .slider-btn:hover{color: nth($cb, 1)}
|
||||||
|
|
||||||
&.skin-0 .btn-img .btn-background{background: rgba(0,0,0,0.5)}
|
.skin-0 .btn-img:after{background: rgba(0,0,0,0.5)}
|
||||||
&.skin-1 .btn-img .btn-background{background: nth($cr, 1)}
|
.skin-1 .btn-img:after{background: nth($cr, 1)}
|
||||||
&.skin-2 .btn-img .btn-background{background: nth($cg, 1)}
|
.skin-2 .btn-img:after{background: nth($cg, 1)}
|
||||||
&.skin-3 .btn-img .btn-background{background: nth($cb, 1)}
|
.skin-3 .btn-img:after{background: nth($cb, 1)}
|
||||||
|
|
||||||
&.skin-0 .default-elm{background: #fff}
|
.skin-0 .default-elm{background: #e0e0e0}
|
||||||
&.skin-1 .default-elm{background: nth($cr, 1)}
|
.skin-1 .default-elm{background: nth($cr, 1)}
|
||||||
&.skin-2 .default-elm{background: nth($cg, 1)}
|
.skin-2 .default-elm{background: nth($cg, 1)}
|
||||||
&.skin-3 .default-elm{background: nth($cb, 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%;}
|
.h-100{height: 100%;}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Reference in New Issue