强大的jQuery焦点图插件Owl Carousel + 响应式图片（案例解析）

最新推荐文章于 2024-05-11 09:33:01 发布

Hayley2016

最新推荐文章于 2024-05-11 09:33:01 发布

阅读量3k

点赞数

分类专栏：前端开发 - HTML / HTML5 前端开发 - jQuery

本文链接：https://blog.csdn.net/qq_32614411/article/details/84971676

版权

前端开发 - HTML / HTML5 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端开发 - jQuery

3 篇文章 0 订阅

订阅专栏

GitHub地址：https://github.com/OwlCarousel2/OwlCarousel2

在各式各样的网站中，都能看到焦点图插件的身影。

一个好的焦点图插件必须满足以下特点：1. 支持不同数量的图片 2. 支持响应式布局 3. 具有良好的兼容性

Owl Carousel完全满足这几个特点。Owl Carousel是非常强大的jQuery焦点图插件，这个焦点图插件功能众多，高度可定制性，支持触摸设备，并且是响应式的。

本文将通过一个自适应轮播图案例，介绍Owl Carousel结合响应式图片的使用方法。

GitHub地址：https://github.com/Hayley2016/OwlCarousel-with-responsiveImage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>强大的jQuery焦点图插件Owl Carousel + 响应式图片（案例解析）</title>
    <link rel="stylesheet" href="node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />
    <style>
        .ad .item {
            height: 200px;
        }
    </style>
</head>
<body>
<div class="container">
    <section class="ad">
        <div class="owl-carousel owl-theme">
            <div class="item">
                <picture>
                    <source srcset="img/ad001-l.png" media="(min-width:50em)">
                    <source srcset="img/ad001-m.png" media="(min-width:30em)">
                    <img src="img/ad001.png" alt="2015年度报告">
                </picture>
            </div>
            <div class="item">
                <picture>
                    <source srcset="img/ad002-l.png" media="(min-width: 50em)">
                    <source srcset="img/ad002-m.png" media="(min-width: 30em)">
                    <img srcset="img/ad002.png" alt="新年红包">
                </picture>
            </div>
            <div class="item">
                <picture>
                    <source srcset="img/ad003-l.png" media="(min-width: 50em)">
                    <source srcset="img/ad003-m.png" media="(min-width: 30em)">
                    <img srcset="img/ad003.png" alt="新手秘籍">
                </picture>
            </div>
        </div>
    </section>
</div>
</body>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/picturefill/dist/picturefill.min.js"></script>
<script src="node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
<script>
  $(document).ready(function(){
    $('.owl-carousel').owlCarousel({
      items: 1,
      loop: true,
      autoplay: true,
      autoplayTimeout: 3000,
      autoplayHoverPause: true
    });
  });
</script>
</html>

附：如何挑选第三方插件：

1. 使用人数 2. 是否开源 3. 文档是否齐全 4. 活跃性 5. 小巧够用的组件（轻量级）

与君共勉：再牛逼的梦想，也抵不住傻逼般的坚持！

Hayley2016

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
强大的jQuery焦点图插件Owl Carousel + 响应式图片（案例解析）

GitHub地址：https://github.com/OwlCarousel2/OwlCarousel2在各式各样的网站中，都能看到焦点图插件的身影。一个好的焦点图插件必须满足以下特点：1. 支持不同数量的图片 2. 支持响应式布局 3. 具有良好的兼容性Owl Carousel完全满足这几个特点。Owl Carousel是非常强大的jQuery焦点图插件，这个焦点图插件功能众多，高...
复制链接

扫一扫