javascript图片轮播之gallery.js
- WBOY原創
- 2016-06-07 11:36:451693瀏覽
gallery.js是独立的图片轮播javascript插件,仅仅128行代码,适合企业官网、海报宣传、精品专题等图片播放
详情请阅读：git.oschina.net/wuquanyao/Gallery.js/*=========================================================<br>
* gallery.js <br>
* author:wuquanyao<br>
* nickname:挪威森林<br>
* email:wqynqa@163.com<br>
* date:2015-10<br>
* ver:1.0.0<br>
*=========================================================*/<br>
var Gallery = {};<br>
(function(Gallery){<br>
Gallery.pc = function(config)<br>
{<br>
factory(config);<br>
}<br>
Gallery.mobile = function(config)<br>
{<br>
//do something,follow up!!<br>
}<br>
var wrapper,root,len,dotWrapper,dotTag,iwidth,awidth,height,dotWrapper,duration,index=0,offset=0,prev=0;<br>
//selector,pc or mobile,dot tag,duration<br>
function factory(config)<br>
{<br>
wrapper = document.querySelector(config['selector']);<br>
//render image<br>
create_img(config['data'], wrapper);<br>
root = wrapper.parentNode;<br>
len = count( wrapper);<br>
dotWrapper = wrapper.nextSibling;<br>
dotTag = config['dotTag'] || 'span';<br>
iwidth = root.offsetWidth;<br>
awidth = iwidth*len;<br>
height = root.offsetHeight;<br>
dotWrapper = wrapper.nextSibling;<br>
duration = config['duration'];<br>
//Render dot<br>
create_dot();<br>
//Interval<br>
intervalmove();<br>
//Event Listener<br>
mouseaction();<br>
}<br>
<br>
function create_img(imgs, wrapper)<br>
{<br>
var tag = '', str = '';<br>
for(i in imgs){<br>
tag = "<a><img alt="javascript图片轮播之gallery.js" ></a>";<br>
for(key in imgs[i]){<br>
regExp = new RegExp('(%'+key+'%)','g');<br>
tag = tag.replace(regExp,imgs[i][key]);<br>
}<br>
str+=tag;<br>
}<br>
wrapper.innerHTML = str;<br>
}<br>
function create_dot()<br>
{<br>
var span = "<span></span>",<br>
regExp = new RegExp('(span)','g') ,<br>
span = span.replace(regExp,dotTag),<br>
dots = '';<br>
for(i=0;i<len></len>
dots+=span;<br>
}<br>
dotWrapper.innerHTML = dots;<br>
}<br>
function intervalmove(type)<br>
{<br>
if(type === 'alone'){<br>
offset = index*iwidth;<br>
move();<br>
}else{<br>
dotWrapper.childNodes[index].className = 'active';<br>
window.interval = setInterval(function(){<br>
if((index+1)
offset = (index+1)*iwidth;<br>
prev = index;<br>
index++;<br>
}else{<br>
prev = index;<br>
offset = 0;<br>
index = 0;<br>
}<br>
move();<br>
},duration);<br>
}<br>
function move(){<br>
dotWrapper.childNodes[prev].className = 'normal';<br>
dotWrapper.childNodes[index].className = 'active';<br>
wrapper.style.transition = "all 200ms linear 0ms";<br>
wrapper.style.transform = "translate("+(-offset)+"px,0px)";<br>
}<br>
}<br>
function mouseaction()<br>
{<br>
function eventparse(obj,type,func){<br>
if(document.attachEvent){<br>
var events = {click:'onclick',mouseover:'onmouseover',mouseout:'onmouseout'};<br>
obj.attachEvent(events[type],func);<br>
}else{<br>
var events = {click:'click',mouseover:'mouseover',mouseout:'mouseout'};<br>
obj.addEventListener(events[type],func,false);<br>
}<br>
}<br>
<br>
function init(){<br>
eventparse(root,'mouseover',function(){<br>
window.clearInterval(window.interval); <br>
});<br>
eventparse(root,'mouseout',function(){<br>
intervalmove();<br>
});<br>
for(i=0;i<len></len>
dotWrapper.childNodes[i].index = i;<br>
eventparse(dotWrapper.childNodes[i],'click',function(e){<br>
prev = index;<br>
index = e.target.index;<br>
intervalmove('alone');<br>
});<br>
}<br>
}<br>
init();<br>
}<br>
function count()<br>
{<br>
return wrapper.childNodes.length;<br>
}<br>
})(Gallery);效果图
gallery.zip
( 9.18 KB 下载：55 次 )
AD：真正免费，域名+虚机+企业邮箱=0元