Home > Web Front-end > JS Tutorial > body text

Native js implements mobile development carousel pictures and album sliding effects_javascript skills

WBOY
Release: 2016-05-16 16:03:21
Original
1487 people have browsed it

How to use:

Quote css files and js files respectively, such as:

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

Copy after login

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>
Copy after login

javascript:

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

Copy after login

Full example:






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













    <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>
Copy after login

The above is the entire content of this article, I hope you all like it.

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!