javascript图片轮播之gallery.js

gallery.js是独立的图片轮播javascript插件,仅仅128行代码,适合企业官网、海报宣传、精品专题等图片播放
详情请阅读：git.oschina.net/wuquanyao/Gallery.js
/*=========================================================
* gallery.js
* author:wuquanyao
* nickname:挪威森林
* email:[e-mail]
* 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 = "";
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 = "",
regExp = new RegExp('(span)','g') ,
span = span.replace(regExp,dotTag),
dots = '';
for(i=0;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) 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 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 下载：55 次 )

AD：真正免费，域名+虚机+企业邮箱=0元