🎉 新增幻灯片模块sliders ✨
lcoln
parent
f60bc91d95
commit
7ee6612fc7
|
|
@ -1,2 +1,3 @@
|
||||||
*.min.js
|
*.min.js
|
||||||
*.min.css
|
*.min.css
|
||||||
|
./index.html
|
||||||
|
|
@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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()
|
||||||
|
|
||||||
|
})
|
||||||
|
|
@ -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 |
|
|
@ -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>
|
||||||
Reference in New Issue