owlCarousel进度条图片轮播

分类栏目:焦点图

75

条评论

素材描述:

1、head引入css文件

1
2
3
<!--插件样式库-->
<link rel="stylesheet" type="text/css" href="css/owl.theme.css" />
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />

2、head引入js文件

1
2
3
4
5
<script type="text/javascript" src="js/jquery.min.js"></script>
 
<!--插件-->
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/progress.js" ></script>

3、body引入部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="owl-demo" class="owl-carousel">
    <a class="item"><img src="images/banner1.jpg" alt=""></a>
    <a class="item"><img src="images/banner2.jpg" alt=""></a>
    <a class="item"><img src="images/banner3.jpg" alt=""></a>
</div>
 
<!--调用方法-->
<script type="text/javascript">
$(function(){
    $('#owl-demo').owlCarousel({
        items: 1,
        autoPlay: true,
        slideSpeed: 100,
    });
});
</script>

全部评论 / 0