This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

优化幻灯片组件

old
lcoln 2017-09-17 18:49:58 +08:00
parent 7a7be3881e
commit fc767ca6ee
14 changed files with 285 additions and 168 deletions

48
js/lib/sliders/Readme.md Normal file
View File

@ -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>
```

1
js/lib/sliders/main.css Normal file
View File

@ -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}}

41
js/lib/sliders/main.htm Normal file
View File

@ -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>

139
js/lib/sliders/main.js Normal file
View File

@ -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()
})

56
js/lib/sliders/main.scss Normal file
View File

@ -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;}
}

View File

@ -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}

View File

@ -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>

View File

@ -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()
})

View File

@ -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;}
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 500 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 208 KiB

View File

@ -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>