Rumah >php教程 >php手册 >javascript图片轮播之gallery.js

javascript图片轮播之gallery.js

WBOY
WBOYasal
2016-06-07 11:36:451689semak imbas

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);效果图
javascript图片轮播之gallery.js
javascript图片轮播之gallery.js
javascript图片轮播之gallery.js

附件 gallery.zip ( 9.18 KB 下载:55 次 )

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn