Home  >  Article  >  Web Front-end  >  原生js实现移动开发轮播图、相册滑动特效_javascript技巧

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

WBOY
WBOYOriginal
2016-05-16 16:03:211462browse

使用方法:

分别引用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" / alt="原生js实现移动开发轮播图、相册滑动特效_javascript技巧" ></a></li>
<li><a href="/"><img  src="img/2.jpg" / alt="原生js实现移动开发轮播图、相册滑动特效_javascript技巧" ></a></li>
<li><a href="/"><img  src="img/3.jpg" / alt="原生js实现移动开发轮播图、相册滑动特效_javascript技巧" ></a></li>

javascript:

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

完整示例:






photoSlider-纯js移动开发轮播图、相册滑动插件













    <li><a href="/"><img src="img/1.jpg" / alt="原生js实现移动开发轮播图、相册滑动特效_javascript技巧" ></a></li> <li><a href="/"><img src="img/2.jpg" / alt="原生js实现移动开发轮播图、相册滑动特效_javascript技巧" ></a></li> <li><a href="/"><img src="img/3.jpg" / alt="原生js实现移动开发轮播图、相册滑动特效_javascript技巧" ></a></li>

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn