/*=========================================================
* gallery.js
* author:wuquanyao
* nickname:挪威森林
* email:wqynqa@163.com
* date:2015-10
* ver:1.0.0
*=========================================================*/
var Gallery = {};
(function(Gallery){
Gallery.pc = function(config)
{
factory(config);
}
Gallery.mobile = function(config)
{
//do something,follow up!!
}
var wrapper,root,len,dotWrapper,dotTag,iwidth,awidth,height,dotWrapper,duration,index=0,offset=0,prev=0;
//selector,pc or mobile,dot tag,duration
function factory(config)
{
wrapper = document.querySelector(config['selector']);
//render image
create_img(config['data'], wrapper);
root = wrapper.parentNode;
len = count( wrapper);
dotWrapper = wrapper.nextSibling;
dotTag = config['dotTag'] || 'span';
iwidth = root.offsetWidth;
awidth = iwidth*len;
height = root.offsetHeight;
dotWrapper = wrapper.nextSibling;
duration = config['duration'];
//Render dot
create_dot();
//Interval
intervalmove();
//Event Listener
mouseaction();
}
function create_img(imgs, wrapper)
{
var tag = '', str = '';
for(i in imgs){
tag = "<a href='%link%' target='%target%'><img src='%img%' width='100%' height='100%'></a>";
for(key in imgs[i]){
regExp = new RegExp('(%'+key+'%)','g');
tag = tag.replace(regExp,imgs[i][key]);
}
str+=tag;
}
wrapper.innerHTML = str;
}
function create_dot()
{
var span = "<span class='normal'></span>",
regExp = new RegExp('(span)','g') ,
span = span.replace(regExp,dotTag),
dots = '';
for(i=0;i<len;i++){
dots+=span;
}
dotWrapper.innerHTML = dots;
}
function intervalmove(type)
{
if(type === 'alone'){
offset = index*iwidth;
move();
}else{
dotWrapper.childNodes[index].className = 'active';
window.interval = setInterval(function(){
if((index+1) < len){
offset = (index+1)*iwidth;
prev = index;
index++;
}else{
prev = index;
offset = 0;
index = 0;
}
move();
},duration);
}
function move(){
dotWrapper.childNodes[prev].className = 'normal';
dotWrapper.childNodes[index].className = 'active';
wrapper.style.transition = "all 200ms linear 0ms";
wrapper.style.transform = "translate("+(-offset)+"px,0px)";
}
}
function mouseaction()
{
function eventparse(obj,type,func){
if(document.attachEvent){
var events = {click:'onclick',mouseover:'onmouseover',mouseout:'onmouseout'};
obj.attachEvent(events[type],func);
}else{
var events = {click:'click',mouseover:'mouseover',mouseout:'mouseout'};
obj.addEventListener(events[type],func,false);
}
}
function init(){
eventparse(root,'mouseover',function(){
window.clearInterval(window.interval);
});
eventparse(root,'mouseout',function(){
intervalmove();
});
for(i=0;i<len;i++){
dotWrapper.childNodes[i].index = i;
eventparse(dotWrapper.childNodes[i],'click',function(e){
prev = index;
index = e.target.index;
intervalmove('alone');
});
}
}
init();
}
function count()
{
return wrapper.childNodes.length;
}
})(Gallery);效果图附件 gallery.zip ( 9.18 KB 下载:96 次 )
ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。
