原生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>
以上所述就是本文的全部内容了，希望大家能够喜欢。