jquery slider的总结

非 Y 不嫁゛ 提交于 2019-12-04 17:14:00

1、Owl Carousel

Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,它具有一下特点:

  • 兼容所有浏览器
  • 支持响应式
  • 支持 CSS3 过度
  • 支持触摸事件
  • 支持 JSON 及自定义 JSON 格式
  • 支持进度条
  • 支持自定义事件
  • 支持延迟加载
  • 支持自适应高度
  • ……

Owl Carousel 提供了众多的参数、回调函数及自定义事件(具体请往下浏览),所以它几乎可以满足你的所有要求。

兼容

浏览器兼容:兼容所有浏览器,包括 IE6、IE7。

jQuery 兼容:兼容 1.7 及以上版本。

使用方法

1、引入文件

<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>

2、HTML

<div id="owl-demo" class="owl-carousel">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

3、JavaScript

$(function(){
    $('#owl-example').owlCarousel();
});

 

 

2、Slider Revolution

<script src="js/jquery.js"></script> 
<link rel="stylesheet"  href="css/style.css" media="screen" /> 
<script src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script> 
<script src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!