原生js实现移动开发轮播图、相册滑动特效

前端技术 2023/09/01 JavaScript

使用方法：

分别引用css文件和js文件 如：

<link rel=\"stylesheet\" type=\"text/css\" href=\"css/photoSlider.min.css\" />
<script src=\"js/photoSlider.min.js\" type=\"text/javascript\" charset=\"utf-8\"></script>

html:

<li><a href=\"/\"><img src=\"img/1.jpg\" /></a></li>
<li><a href=\"/\"><img src=\"img/2.jpg\" /></a></li>
<li><a href=\"/\"><img src=\"img/3.jpg\" /></a></li>

javascript:

window.onload=function(){
photoSlide({
wrap: document.getElementById(\'photo\'),//最外层容器
loop: true,//设置无缝循环
autoPlay:true,//自动轮播
autoTime:4000,//轮播时间间隔
pagination:true //点状态列表
});
}

完整示例：

<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<meta name=\"viewport\" content=\"initial-scale=1.0, maximum-scale=1.0, user-scalable=no\" />
<title>photoSlider-纯js移动开发轮播图、相册滑动插件</title>
<meta name=\"keywords\" content=\"javascript移动端相册轮播图手指滑动插件\" />
<meta name=\"description\" content=\"javascript移动端相册轮播图手指滑动插件,支持自定义轮播图滑动属性\" />
<meta name=apple-mobile-web-app-title content=\"photoSlider\">
<meta name=\"apple-mobile-web-app-capable\" content=\"yes\" />
<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\" />
<meta name=renderer content=webkit>
<meta name=\"full-screen\" content=\"yes\">
<meta name=\"browsermode\" content=\"application\">
<meta name=\"x5-fullscreen\" content=\"true\">
<meta name=\"x5-page-mode\" content=\"app\">
<link rel=\"stylesheet\" type=\"text/css\" href=\"css/photoSlider.min.css\" />
</head>
<body>
<div id=\"photo\">
<div id=\"loading\" class=\"spinner\">
<div class=\"bounce1\"></div>
<div class=\"bounce2\"></div>
<div class=\"bounce3\"></div>
</div>
<ul id=\"pic-view\" class=\"pic-view\">
<li><a href=\"/\"><img src=\"img/1.jpg\" /></a></li>
<li><a href=\"/\"><img src=\"img/2.jpg\" /></a></li>
<li><a href=\"/\"><img src=\"img/3.jpg\" /></a></li>
</ul>
</div>
</body>
</html>
<script src=\"js/photoSlider.min.js\" type=\"text/javascript\" charset=\"utf-8\"></script>
<script type=\"text/javascript\">
document.onreadystatechange = subSomething;
function subSomething() {
if (document.readyState == \'complete\') {
setTimeout(function(){
var load=document.getElementById(\'loading\');
load.style.opacity=0;
document.getElementById(\'pic-view\').setAttribute(\'class\',\'pic-view show\');
load.remove();
},500);
}
}
window.onload=function(){
photoSlide({
wrap: document.getElementById(\'photo\'),
loop: true,
autoPlay:true,
autoTime:4000,
pagination:true
});
}
</script>

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/1894

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案