jquery幻灯⽚插件之owl.carousel.js 官⽹地址:
这个插件兼容各种浏览器,以及移动端
使⽤⽅法:
1、下载⽂件,解压以后,把dist⾥⾯的⽂件放到项⽬中
2、引⼊jquery⽂件,必须是1.8以上的
3、页⾯引⼊的⽂件:
<link rel="stylesheet" href="./js/vendor/OwlCarousel2-2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="js/vendor/OwlCarousel2-2.2.1/assets/owl.theme.default.min.css">
<script src="js/vendor/jquery-3.1.1.js"></script>
<script src="js/vendor/OwlCarousel2-2.2.1/owl.carousel.min.js"></script>
4、页⾯代码:
1 <div class="owl-carousel owl-theme">
2            <div class="item">
3                <picture>
4                    <source srcset="img/ad001-l.png" media="(min-width:50em)">jquery插件分享
5                    <source srcset="img/ad001-m.png" media="(min-width:30em)">
6                    <img src="img/ad001.png" alt="2015年度报告">
7                </picture>
8            </div>
9            <div class="item">
10                <picture>
11                    <source srcset="img/ad002-l.png" media="(min-width: 50em)">
12                    <source srcset="img/ad002-m.png" media="(min-width: 30em)">
13                    <img srcset="img/ad002.png" alt="新年红包">
14                </picture>
15            </div>
16            <div class="item">
17                <picture>
18                    <source srcset="img/ad003-l.png" media="(min-width: 50em)">
19                    <source srcset="img/ad003-m.png" media="(min-width: 30em)">
20                    <img srcset="img/ad003.png" alt="新⼿秘籍">
21                </picture>
22            </div>
23        </div>

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。