原生js实现移动开发轮播图、相册滑动特效
使用方法:
分别引用css文件和js文件如:
<linkrel="stylesheet"type="text/css"href="css/photoSlider.min.css"/> <scriptsrc="js/photoSlider.min.js"type="text/javascript"charset="utf-8"></script>
html:
<li><ahref="/"><imgsrc="img/1.jpg"/></a></li> <li><ahref="/"><imgsrc="img/2.jpg"/></a></li> <li><ahref="/"><imgsrc="img/3.jpg"/></a></li>
javascript:
window.onload=function(){ photoSlide({ wrap:document.getElementById('photo'),//最外层容器 loop:true,//设置无缝循环 autoPlay:true,//自动轮播 autoTime:4000,//轮播时间间隔 pagination:true//点状态列表 }); }
完整示例:
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metaname="viewport"content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <title>photoSlider-纯js移动开发轮播图、相册滑动插件</title> <metaname="keywords"content="javascript移动端相册轮播图手指滑动插件"/> <metaname="description"content="javascript移动端相册轮播图手指滑动插件,支持自定义轮播图滑动属性"/> <metaname=apple-mobile-web-app-titlecontent="photoSlider"> <metaname="apple-mobile-web-app-capable"content="yes"/> <metaname="apple-mobile-web-app-status-bar-style"content="black"/> <metaname=renderercontent=webkit> <metaname="full-screen"content="yes"> <metaname="browsermode"content="application"> <metaname="x5-fullscreen"content="true"> <metaname="x5-page-mode"content="app"> <linkrel="stylesheet"type="text/css"href="css/photoSlider.min.css"/> </head> <body> <divid="photo"> <divid="loading"class="spinner"> <divclass="bounce1"></div> <divclass="bounce2"></div> <divclass="bounce3"></div> </div> <ulid="pic-view"class="pic-view"> <li><ahref="/"><imgsrc="img/1.jpg"/></a></li> <li><ahref="/"><imgsrc="img/2.jpg"/></a></li> <li><ahref="/"><imgsrc="img/3.jpg"/></a></li> </ul> </div> </body> </html> <scriptsrc="js/photoSlider.min.js"type="text/javascript"charset="utf-8"></script> <scripttype="text/javascript"> document.onreadystatechange=subSomething; functionsubSomething(){ if(document.readyState=='complete'){ setTimeout(function(){ varload=document.getElementById('loading'); load.style.opacity=0; document.getElementById('pic-view').setAttribute('class','pic-viewshow'); load.remove(); },500); } } window.onload=function(){ photoSlide({ wrap:document.getElementById('photo'), loop:true, autoPlay:true, autoTime:4000, pagination:true }); } </script>
以上所述就是本文的全部内容了,希望大家能够喜欢。