• ## slide

千次阅读 2017-09-16 18:29:36
slide Demo

<!DOCTYPE html>
<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>transitonendʵ�ֵ��ֲ�����</title>

<style type="text/css">
* {
margin: 0;
}

li {
list-style: none;
}

#wrap {
width: 26.66666667rem;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 8.544166667rem;
}

.banner {
position: absolute;
left: 0px;
}

.banner li {
width: 26.66666667rem;
float: left;
height: 8.544166667rem;
}

img {
width: 100%;
}

.change {
position: absolute;
bottom: 1rem;
text-align: center;
width: 100%;
opacity: 0.8;
}

.change li {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
background: #666;
margin: 0 0.2rem;
}

.change .on {
background: red;
}
</style>

<body>
<div id="wrap"></div>
</body>

<script type="text/javascript">
//���Ƹ�Ԫ�ص�rem
function initSize() {
var win_w = document.body.offsetWidth;
var min_w;
var fontSize;
if(win_w > 640) {
fontSize = 24;
} else {
min_w = Math.max(320, win_w);
fontSize = min_w / 320 * 12
}
document.getElementsByTagName('html')[0].style.fontSize = fontSize + 'px';
}

onresize = initSize;
initSize();
function Slider(opts) {
this.wrap = opts.obj;
this.list = opts.list;
this.nav = opts.nav;
this.time = opts.time;
//����������
this.init()
this.renderDom();
this.bindDom();
}
//��ʼ��
Slider.prototype.init = function() {
this.index = 0;
this.scale = this.wrap.offsetWidth;
}
//��������ԭ����
Slider.prototype.go = function(n) {
var that = this;
var Oul = that.Oul;
var index = that.index;
var scale = that.scale;
var lis = Oul.getElementsByTagName('li');
var len = that.list.length;
var i;

Oul.style.webkitTransition = 'all 0.2s ease-out';
i = index + n * 1;
if(i >= len - 2) {
Oul.style.webkitTransition = 'none';
Oul.style.left = -that.scale + 'px';
i = 0;
//СԲ�㲿���ж�
if(that.nav) {
that.Ouli.firstChild.className = 'on';
}
} else if(i < 0) {
i = len - 3;
Oul.style.webkitTransition = 'none';
Oul.style.left = -(len - 2) * that.scale + 'px';
//СԲ�㲿���ж�
if(that.nav) {
that.Ouli.lastChild.className = 'on';
}
}
//������ǰͼƬ����ֵ
that.index = i;
})
Oul.style.left = -(i + 1) * that.scale + 'px';
//����СԲ��
if(that.nav) {
var Ouli = that.Ouli.getElementsByTagName('li');
for(var a = 0; a < len - 2; a++) {
if(Ouli[a].className == 'on') {
Ouli[a].className = '';
}
}
Ouli[i] && (Ouli[i].className = 'on');
}

}
//��Ⱦҳ���ԭ����
Slider.prototype.renderDom = function() {
var wrap = this.wrap;
var data = this.list;
var len = data.length;
var scale = this.scale
//��������
this.Oul = document.createElement('ul');
//����ͼƬ����
for(var i = 0; i < len; i++) {
var li = document.createElement('li');
var item = data[i];
if(item) {
li.innerHTML = '<img src="' + item['src'] + '"/>'
}

this.Oul.appendChild(li);
}
this.Oul.className = 'banner';
this.Oul.style.left = -scale + 'px';
this.Oul.style.width = +len * scale + 'px'
wrap.appendChild(this.Oul);
//����СԲ��
if(this.nav) {
this.Ouli = document.createElement('ul');
for(var i = 0; i < len - 2; i++) {
var li = document.createElement('li');
this.Ouli.appendChild(li);
}
this.Ouli.className = 'change';
wrap.appendChild(this.Ouli);
this.Ouli.firstChild.className = 'on';
}

}
//���¼�����ԭ����
Slider.prototype.bindDom = function() {
var that = this;
var len = that.list.length - 2;
var Oul = that.Oul;
var scale = that.scale;
var offsetLeft;
var time = that.time;
//����ʱ��
function next() {
that.go('1')
}
var timer = setInterval(next, time)
//������ʼ
var startHandler = function(event) {
//��¼�տ�ʼ�Ӵ���Ļ��ʱ��
that.startTime = new Date() * 1;
//��¼�տ�ʼ�Ӵ���Ļ��λ��
that.startX = event.touches[0].pageX;
//���ƫ����
that.offsetX = 0;
offsetLeft = Oul.offsetLeft;
//�����ʱ��
clearInterval(timer);
}
//������������
var moveHandler = function(event) {
//��ֹ�����Ĭ�ϴ����¼�
event.preventDefault();
//����ƫ����
that.offsetX = event.touches[0].pageX - that.startX;
//ͼƬ����ָ�ƶ�
Oul.style.webkitTransition = 'none';
Oul.style.left = +offsetLeft + that.offsetX + 'px';

}
//��������
var endHandler = function(event) {
//��¼��ָ�뿪��Ļʱ��λ��
var endTime = new Date() * 1;
//��ȡ�����߽�ֵ
var boundary = scale / 3
//�жϿ컬������������
if(endTime - that.startTime > 300) {
if(that.offsetX > boundary) {
//��һҳ
that.go('-1');
} else if(that.offsetX < -boundary) {
//��һҳ
that.go('1');
} else {
//���ڱ�ҳ
that.go('0');
}
} else {
if(that.offsetX > 50) {
that.go('-1');
} else if(that.offsetX < -50) {
that.go('1');
} else {
that.go('0');
}
}
timer = setInterval(next, time);
}

//�¼���
}

var list = [{
src: 'img/5.jpg'
}, {
src: 'img/1.jpg'
}, {
src: 'img/2.jpg'
}, {
src: 'img/3.jpg'
}, {
src: 'img/4.jpg'
}, {
src: 'img/5.jpg'
}, {
src: 'img/1.jpg'
}];

new Slider({
//�������
'obj': document.getElementById('wrap'),
//��������
'list': list,
//�Ƿ���СԲ�㣬Ĭ����false
'nav': true,
//�Զ�����ʱ��
'time': 3500
})
</script>

</html>
展开全文
• slide
• <div><p>Would it be possible (or is it already possible) to get Flexslider to slide back to the beginning once the last slide has been reached (i.e. sliding back through the previous slides)? This in ...
• s a feature or a bug :-), but during the left slide transition on iOS (8.1), the slide coming from the right is transparent and fade in at the end of the animation. On Android the slide is solid, ...
• 第一次使用jupyter制作ppt，对markdown语法不熟悉，或在jupyter中部分markdown语法不可用等，会遇到很多问题。该slide作为参考，详细使用方法可以参照https://blog.csdn.net/lagoon_lala/article/details/100939963
• <div><p>An EPUB generated from InDesign has a slide show. As one navigates from page to page, it leaves behind slices of the previous page when the aspect rations of the images don't match. This ...
• <p>slide right sort by project name slide left sort by contexts <p>or something similar, compare to google+ app where you can select circles and slide through them</p><p>该提问来源于开源项目ÿ...
• <div><p>It seems like as if the height of the slide is the height of the largest slide. Is there a way to specify the slide's height? Or an option in props we can set so all of the slides conform ...
• <div><p>我想js指定切换嵌套的slide，但是无法像平常那样refs无法控制。请问如何切换子slide的index</p><p>该提问来源于开源项目：warpcgd/vue-concise-slider</p></div>
• i want to ask if this is possible, am using horizontal scroll on my website to show the pages, basically there are 5 pages and am using video on background only on 1st page means on 1st slide, so if ...
• <div><p>You may have more transitions in the works but one that I think would be useful is a vertical slide. This would be a nice alternative to the horizontal slide you already have in place. Food ...
• <div><p>Emits an event with the slide dataset when clicked, useful if we need the carousel has many items by page and we need to know which slide has been clicked to control some external component. ...
• <div><p>I had an issue with the sentinel slide appearing as a blank slide in my slideshow. This was running a default Cycle set-up with the exception of using a div instead of an img. In the end I ...
• <div><p>I was just wondering if the fix for a single slide has been included in version 0.4.2. Currently, if i only have a single slide, this is completely hidden on page load. The content is output ...
• slide01
• <div><p>Is it possible to add a class to identify the current active slide?</p><p>该提问来源于开源项目：iosscripts/iosslider</p></div>
• <div><p>Hi, Great control :-) Would it be easy to add a slide animation for the menu ? Thank you !</p><p>该提问来源于开源项目：andreamazz/SlideOutNavigation</p></div>
• <div><p>Slide should be only horizontal not vertical. in terms of mobile, scroll is not working when I touched to scroll down on ngx-gallery.</p><p>该提问来源于开源项目：lukasz-galka/ngx-gallery...
• <div><p>Can I do the slide effect like with the mobile apps? For this effect the next page must be mounted before the previous page unmounted, as I understand it</p><p>该提问来源于开源项目：...
• drop/slide OUT of view" effect. But what a transition where the incoming view should be on top, to create a "drop/slide IN to view" effect?</p><p>该提问来源于开源项目：Telerik-...
• <div><p>Select a slide in overview mode via cursor keys and enter, you will jump to the next slide, after the slideyou've selected (see here: http://flowtime-js.marcolago.com/). <p>That error ...
• left 节点用于承载静止时 slide-view 所展示的节点，此节点的宽高应与传入 slide-view 的宽高相同。right 节点用于承载滑动时所展示的节点，其宽度应于传入 slide-view 的 slideWidth 相同。 <slide-view class=...
• After a slideshow has been added to OnlyM, advancing a slide then stopping the slide show and starting the slide show again starts from the first slide. <p><strong>Describe the solution you'd like...
• <div><p>It seems when you jump to or from slide 1 from a slide past slide 3, you can see the last slide animate in just behind slide 1 but in front of the rest of the slides. I think it's a <code>...
• slide to reveal" animations with MGBox2. I believe with zIndex and reworking the built-in animation calculations, I may be able to extend MGBox to do this. I'm wondering if anyone has tried or...
• The first being, could I set a data-attribute on each slide which determines the direction to slide next, thus allowing me to create a 'random' effect for transitions? <p>The 2nd thing I ...
• <div><p>This issue should track progress of more slide types. <p><strong>Current slide types: - ...

...