Skip to content

Instantly share code, notes, and snippets.

@wiky

wiky/index.html

Last active December 20, 2015 15:29
Show Gist options
  • Save wiky/6154421 to your computer and use it in GitHub Desktop.
Save wiky/6154421 to your computer and use it in GitHub Desktop.
Download ZIP
slide
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Odin</title>
<link href="style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="slide.js"></script>
<script>
$(function(){
var slide = new Slide({
items: [
{
url: 'http://style.alibaba.com/simg/single/logo/mail-beginners-guide/1.jpg',
link: '#',
title: ''
}, {
url: 'http://style.alibaba.com/simg/single/logo/mail-beginners-guide/2.jpg',
link: '#',
title: ''
}, {
url: 'http://style.alibaba.com/simg/single/logo/mail-beginners-guide/3.jpg',
link: '#',
title: ''
}, {
url: 'http://style.alibaba.com/simg/single/logo/mail-beginners-guide/4.jpg',
link: '#',
title: ''
}, {
url: 'http://style.alibaba.com/simg/single/logo/mail-beginners-guide/5.jpg',
link: '#',
title: ''
}, {
url: 'http://style.alibaba.com/simg/single/logo/mail-beginners-guide/6.jpg',
link: '#',
title: ''
}
],
width: 655,
height: 376,
cycle: true
}).render(document.body);
});
</script>
</head>
<body></body>
</html>
Raw
slide.js
(function(exports) {
var Slide = function(config) {
$.extend(this, config || {});
this._init();
};
var Event = $({});
Slide.prototype = {
container: null,
width: 660,
height: 280,
items: [],
cycle: true,
start: 0,
duration: 400,
interval: 5000,
_init: function() {
this._createSlide();
if (this.container) {
this.render(this.container);
}
},
_createSlide: function() {
var items = this.items,
width = this.width,
height = this.height,
itemsHtml = [],
navHtml = [],
navBtnHtml = '';
if (!width || !height) {
throw new Error('请指定视口的宽度和高度');
}
if (!items || !items.length) {
throw new Error('请指定图片对象数组');
}
this.el = $('<div class="mui-slide-viewport" style="width:' + width + 'px;height:' + height + 'px;">');
this.slides = $('<ul class="mui-slide-items" style="width:' + items.length * 100 + '%;height:' + height + 'px">');
this.nav = $('<ul class="mui-slide-controls">');
$.each(items, function(i, item) {
if (!item || !item.url) {
throw new Error('第' + i + '张图片，请指定图片链接地址');
}
itemsHtml.push([
'<li class="mui-slide-panel" title="' + (item.title || '') + '">',
(item.link ? '<a href="' + item.link + '">' : ''),
'<img src="' + item.url + '" alt="' + (item.title || '') + '" width="' + width + '" height="' + height + '"/>',
'</a></li>'
].join(''));
navHtml.push('<li class="mui-control-item" data-for="' + i + '"><a href="javascript:;">' + i + '</a></li>');
});
this.slides.html(itemsHtml);
this.nav.html(navHtml);
this.slideItems = this.slides.find('.mui-slide-panel');
this.navItems = this.nav.find('.mui-control-item');
this.el.append(this.slides);
this.el.append(this.nav);
navBtnHtml = [
'<a href="javascript:;" class="mui-control-prev" data-for="prev" title="Previous">&lt;</a>',
'<a href="javascript:;" class="mui-control-next" data-for="next" title="Next">&gt;</a>'
].join('');
this.el.append(navBtnHtml);
this.prevNode = this.el.find('.mui-control-prev');
this.nextNode = this.el.find('.mui-control-next');
return this.el;
},
render: function(container) {
this.container = $(container || '');
if (!this.container || !this.container[0]) {
throw new Error('请提供渲染到的容器');
}
this.renderUI();
this.bindUI();
return this;
},
renderUI: function() {
var el = this.el || this._createSlide(),
prevNode, nextNode;
this.container.append(el);
this.navigate(this.start);
this._middle(this.prevNode);
this._middle(this.nextNode);
this.prevNode.hide();
this.nextNode.hide();
},
bindUI: function() {
this.el.find('[data-for]').click($.proxy(function(e) {
var target = $(e.currentTarget),
dataFor = target.attr('data-for');
if (dataFor === 'prev') {
this.prev();
} else if (dataFor === 'next') {
this.next();
} else {
this.navigate(dataFor);
}
}, this));
if (this.interval > 0) {
var autoCarousel = $.proxy(function() {
setTimeout($.proxy(function() {
if (!this._pause) {
this.navigate(this.currentIndex + 1);
}
autoCarousel();
}, this), this.interval);
}, this);
autoCarousel();
}
this.el.hover($.proxy(function() {
this.prevNode.show();
this.nextNode.show();
this.pause();
}, this), $.proxy(function() {
this.prevNode.hide();
this.nextNode.hide();
this.unpause();
}, this));
},
prev: function() {
var index = this.currentIndex - 1;
index = this._parseIndex(index);
this.navigate(index);
this.trigger('prev', index);
},
next: function() {
var index = this.currentIndex + 1;
index = this._parseIndex(index);
this.navigate(index);
this.trigger('next', index);
},
// -1 ~ length
navigate: function(index) {
var items = this.items,
slideItem,
left,
from = this.currentIndex || 0,
callback = null,
params;
index = this._parseIndex(index);
this.currentIndex = this._parseIndex(index, true);
this._active(this.currentIndex);
params = {
from: from,
to: this.currentIndex
};
if (index === -1) {
slideItem = this.slideItems.get(items.length - 1);
slideItem.style.left = -this.slides.width() + 'px';
callback = $.proxy(function() {
this.slides.css('left', (-items.length - index) * this.width + 'px');
slideItem.style.left = null;
}, this);
} else if (index === items.length) {
slideItem = this.slideItems.get(0);
slideItem.style.left = this.slides.width() + 'px';
callback = $.proxy(function() {
this.slides.css('left', 0 + 'px');
slideItem.style.left = null;
}, this);
}
this.slides.animate({
left: (-index * this.width) + 'px'
}, {
duration: this.duration,
queue: false,
complete: $.proxy(function() {
if (callback) {
callback();
}
this.trigger('navigate.finished', params);
}, this)
});
this.trigger('navigate.start', params);
},
pause: function() {
this._pause = true;
},
unpause: function() {
this._pause = false;
},
on: function() {
Event.on.apply(Event, arguments);
},
trigger: function() {
Event.trigger.apply(Event, arguments);
},
_active: function(index) {
var items = this.navItems;
items.removeClass('mui-control-active');
$(items.get(index)).addClass('mui-control-active');
},
_middle: function(el) {
el = $(el);
el.css('top', (this.el.height() - el.height()) / 2);
},
_parseIndex: function(index, force) {
len = this.items.length;
index = parseInt(index, 10) || 0;
if (!this.cycle || (index !== -1 && index !== len) || !! force) {
index = len ? ((index >= 0) ? (index % len) : ((index % len) + len)) : 0;
}
return index;
}
};
exports.Slide = Slide;
})(this);
Raw
style.css
.mui-slide-viewport {position:relative;overflow:hidden;}
.mui-slide-viewport img {border: none}
.mui-slide-viewport ul {margin: 0;padding: 0;position:absolute;font-size:0;letter-spacing:normal;word-spacing:normal;}
.mui-slide-viewport li {margin: 0;padding: 0;list-style: none;float: left; display: inline-block; *display: inline;}
.mui-slide-viewport .mui-slide-panel {position: relative;}
.mui-slide-viewport .mui-slide-controls{right: 45px;bottom: 25px;z-index: 99;}
.mui-slide-viewport .mui-control-prev,
.mui-slide-viewport .mui-control-next {font-family: "SimHei", "NSimSun", "Simsun"; font-weight: bold; filter: alpha(opacity=60);-moz-opacity:0.6;opacity: 0.6;overflow: hidden;position: absolute;z-index: 99;text-decoration: none; cursor: pointer;background-color:#111;text-align: center; color:#D4D4D4;width: 30px;height: 50px;line-height:50px;display: block;font-size: 28px;}
.mui-slide-viewport .mui-control-prev:hover,
.mui-slide-viewport .mui-control-next:hover,
.mui-slide-viewport .mui-control-prev:focus,
.mui-slide-viewport .mui-control-next:focus{color:#FFF;}
.mui-slide-viewport .mui-control-prev {left: 15px;}
.mui-slide-viewport .mui-control-next {right: 15px;}
.mui-slide-viewport .mui-control-item {margin-right: 10px;}
.mui-slide-viewport .mui-control-item a {text-indent: -99em;overflow: hidden;text-decoration: none; width: 10px;height: 10px;display: block;border: 1px solid #666;cursor: pointer;background: #FFF;}
.mui-slide-viewport .mui-control-item a:hover,
.mui-slide-viewport .mui-control-item a:focus {background: #FC0;}
.mui-slide-viewport .mui-control-active a,
.mui-slide-viewport .mui-control-active a:hover,
.mui-slide-viewport .mui-control-active a:focus {background: #F60;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment