Home > php教程 > php手册 > body text

flexslider图片轮播、多图相册滑动(支持触屏版)

WBOY
Release: 2016-06-07 11:39:08
Original
1526 people have browsed it

Flexslider是一款jQuery滚动插件,代码非常简洁,拓展性很高。可创建图片轮播效果、焦点图效果、图文混排滚动效果,支持手机端等移动设备滑动。
flexslider图片轮播、多图相册滑动(支持触屏版)

若是想看更多网站特效、详细网页教程请访问http://www.sucaihuo.com/js/6.htm l 还有jQuery演示DEMO,最主要是可以免费下载。Flexslider最受众多开发人员好评的优秀,具有以下优势:<br> 支持触屏移动设备滑动。<br> 支持滑动和淡入淡出效果。<br> 支持水平、垂直方向滑动。<br> 支持键盘方向键控制。<br> 支持图文并茂滑动。<br> 自适应屏幕大小。<br> 易控制滑动单元个数。<br> 选项设置和回调函数很丰富。<br> HTML<br> <div>  <br>       <ul>  <br>         <li><img alt="flexslider图片轮播、多图相册滑动(支持触屏版)" ></li>  <br>         <li><img alt="flexslider图片轮播、多图相册滑动(支持触屏版)" ></li>  <br>         <li><img alt="flexslider图片轮播、多图相册滑动(支持触屏版)" ></li>  <br>         <li><img alt="flexslider图片轮播、多图相册滑动(支持触屏版)" ></li>  <br>       </ul>  <br> </div> <br> 接着加载jQuery.js和jquery.flexslider-min.js及flexslider.css。<br> <link>  <br> <script></script>  <br> <script></script><br> jQuery<br> 调用Flexslider插件超级简单,只要用以下代码即可:<br> $(function() {  <br>     $(".flexslider").flexslider();  <br> });<br> Flexslider参数设置<br> 参数    描述    默认值<br> animation    动画效果    fade<br> direction    内容滑动方向:horizontal(水平) vertical(垂直)    horizontal<br> animationLoop    是否循环滚动    true<br> startAt    初始滑动时的起始位置,定位从第几个开始滑动    0<br> slideshow    是否自动滑动    true<br> slideshowSpeed    滑动内容展示时间(ms)    7000<br> animationSpeed    内容切换时间(ms)    600<br> initDelay    初始化延时时间    0<br> pauseOnHover    当鼠标滑动到滚动内容时,是否暂停滚动    false<br> touch    是否支持触摸滑动(包括wap及其他移动设备)    true<br> directionNav    是否显示左右箭头按钮    true<br> minItems    一次最少展示滑动单元个数    1<br> maxItems    一次最多展示滑动单元个数    0<br> move    一次滑动单元个数    0<br> 回调函数    <br> start: function(){},<br> before: function(){},<br> after: function(){},<br> end: function(){},<br> added: function(){},<br> removed: function(){},<br> init: function(){},若是想看更多精品特效、详细教程请访问 http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。

附件 flexslider图片轮播、多图相册滑动(支持触屏版).zip ( 951.01 KB 下载:42 次 )

AD:真正免费,域名+虚机+企业邮箱=0元

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 Recommendations
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!