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

🎉 新增幻灯片模块sliders

old
lcoln 2017-09-15 22:05:45 +08:00
parent f60bc91d95
commit 7ee6612fc7
13 changed files with 216 additions and 3 deletions

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
*.min.js
*.min.css
./index.html

12
.vscode/tasks.json vendored Normal file
View File

@ -0,0 +1,12 @@
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"taskName": "echo",
"type": "shell",
"command": "echo Hello"
}
]
}

32
index.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<title>first example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div :controller="test">
<template name="pages" config="pageOpts"></template>
</div>
<script src="./js/yua.js"></script>
<script>
;(function(yua){
require(['/lib/pages/main.js'],function(){
var vm = yua({
$id: "test",
pageOpts: {
total: 10,
curr: 1
}
})
yua.scan()
})
})(yua)
</script>
</body>
</html>

View File

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

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

@ -0,0 +1,74 @@
/**
*
* @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

@ -0,0 +1,31 @@
@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.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 500 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 KiB

View File

@ -0,0 +1,36 @@
<!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>