现在位置首页 / 前端开发 /正文

Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器

作者: IT小兵 | 2013年8月22日| 热度:℃ | 评论: |参与:

在项目中,需要做一个幻灯功能,领导说需要一个小清醒的啊,轻量级的。刚开始搜索到这个:

 CRAFTYSLIDE插件。但是用起来比较麻烦。后来找到这个Jquery 插件:OWL Carousel。咋起了这么个名字,真是不明白。

反正好用就行吧。很好用,分享给大家。


首先是说明一下OWL Carousel幻灯的主要功能。

  1. Jquery插件,品牌好,哈哈。基于Jquery开发,比较稳定

  2. 文件小。Css+js不到10k,压缩之后。

  3. 支持触屏。经过测试,在android手机的主流浏览器:QQ、百度、UC、微信内置浏览器等支持

  4. 响应式设计。支持不用屏幕、触屏。支持div、图片等。支持全部显示、单个显示

  5. 简洁代码,使用方便


Demo截图:

支持div如下图

jqueryOWL Carousel使用说明







支持图片


jqueryOWL Carousel使用说明





支持单个项目显示

jqueryOWL Carousel使用说明









使用方法:

引用js和css文件

<!-- Basic stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
 
<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
 
<!-- You can use latest version of jQuery  -->
<script src="jquery-1.9.1.min.js"></script>
 
<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>

在你的页面中,创建一下结构的html代码:

<div id="owl-example" class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  ...
</div>

最后,调用OWL Carousel插件提供的方法:

$(document).ready(function() {
 
  $("#owl-example").owlCarousel();
 
});

是不是很简单?

OWL Carousel参数说明:

参数默认值说明
slideSpeed200滑动间隔时间,毫秒
paginationSpeedfalse是否支持分页
autoPlayfalse是否自动播放。
goToFirsttrue回到首页
goToFirstSpeed1000回到首页时间
stopOnHoverfalse设置成true不支持触摸
navigationfalse是否显示上一个和下一个按钮。
navigationText["prev","next"]显示上下页的文字。不需要的话设置成false:"navigationText : false"
paginationtrue显示分页
paginationNumbersfalse
是否显示分页数字
responsivetrue是否开启响应式设计
items5一次展示项目个数
itemsDesktop[1199,4]在桌面宽度受限的情况,显示项目数
itemsDesktopSmall[979,3]同上
itemsTablet[768,2]同上
itemsMobile[479,1]同上
baseClass"owl-carousel"样式
theme"owl-theme"使用的主题

 外部调用的api接口:

//Initialize Plugin
$(".owl-carousel").owlCarousel()
 
//get carousel instance data and store it in variable owl
var owl = $(".owl-carousel").data('owlCarousel');
 
//Public methods
owl.next()   // Go to next slide
owl.prev()   // Go to previous slide
owl.goTo(x)  // Go to x slide
 
owl.update() // Update Slide
 
owl.buildControlls()    // Build Controlls
owl.destroyControlls()  // Remove Controlls
 
owl.play() // Autoplay
owl.stop() // Autoplay Stop


实例代码:支持div滑动

<div id="owl-example" class="owl-carousel owl-theme" style="opacity: 1; display: block; ">
                
                <div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 4680px; left: 0px; display: block; -webkit-transform: translate3d(0px, 0px, 0px); "><div class="owl-item" style="width: 234px; "><div class="item darkCyan">
                  <img src="assets/img/demo-slides/touch.png" alt="Touch">
                    <h3>Touch</h3>
                    <h4>Can touch this</h4>
                </div></div><div class="owl-item" style="width: 234px; "><div class="item forestGreen">
                  <img src="assets/img/demo-slides/grab.png" alt="Grab">
                    <h3>Grab</h3>
                    <h4>Can grab this</h4>
                </div></div><div class="owl-item" style="width: 234px; "><div class="item orange">
                  <img src="assets/img/demo-slides/responsive.png" alt="Responsive">
                    <h3>Responsive</h3>
                    <h4>Fully responsive!</h4>
                </div></div><div class="owl-item" style="width: 234px; "><div class="item yellow">
                  <img src="assets/img/demo-slides/css3.png" alt="CSS3">
                    <h3>CSS3</h3>
                    <h4>3D Acceleration.</h4>
                </div></div><div class="owl-item" style="width: 234px; "><div class="item dodgerBlue">
                  <img src="assets/img/demo-slides/multi.png" alt="Multi">
                    <h3>Multiply</h3>
                    <h4>Owls on page.</h4>
                </div></div><div class="owl-item" style="width: 234px; "><div class="item skyBlue">
                  <img src="assets/img/demo-slides/modern.png" alt="Modern Browsers">
                    <h3>Modern</h3>
                    <h4>Browsers Compatibility</h4>
                </div></div><div class="owl-item" style="width: 234px; "><div class="item zombieGreen">
                  <img src="assets/img/demo-slides/zombie.png" alt="Zombie Browsers - old ones">
                    <h3>Zombie</h3>
                    <h4>Browsers Compatibility</h4>
                </div></div><div class="owl-item" style="width: 234px; "><div class="item violet">
                  <img src="assets/img/demo-slides/controls.png" alt="Take Control">
                    <h3>Take Control</h3>
                    <h4>The way you you like</h4>
                </div></div><div class="owl-item" style="width: 234px; "><div class="item yellowLight">
                  <img src="assets/img/demo-slides/feather.png" alt="Light">
                    <h3>Light</h3>
                    <h4>As a feather</h4>
                </div></div><div class="owl-item" style="width: 234px; "><div class="item steelGray">
                  <img src="assets/img/demo-slides/tons.png" alt="Tons of Opotions">
                    <h3>Tons</h3>
                    <h4>of options</h4>
                </div></div></div></div> 
              <div class="owl-controlls clickable"><div class="owl-pagination"><div class="owl-page active"><span class=""></span></div><div class="owl-page"><span class=""></span></div></div></div></div>

 项目地址:https://github.com/OwlFonk/OwlCarousel

demo地址:http://owlgraphic.com/owlcarousel/demos/images.html

转发注明来自:IT分享 http://suchso.com

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询