jQuery 幻灯片插件 owl_carousev1.31 使用

1、js文件

owl_carousev1.31l.zip下载

2、代码

 <!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>OwlCarousel</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
    <meta http-equiv="Expires" content="0"/>
    <link th:href="@{/js/plugins/owl_carousel/css/owl.carousel.css}" rel="stylesheet">
    <link th:href="@{/js/plugins/owl_carousel/css/animate.css}" rel="stylesheet">
    <style type="text/css">
        .container {
            width: 1903px;
            height: 600px;
        }
 
        .owl-carousel, .owl-wrapper-outer, .owl-wrapper, .owl-item {
            height: 100%;
        }
 
        .owl-item {
            background-color: lightgray;
            padding-top: 2%;
        }
 
        .item {
            background-color: lightcoral;
        }
    </style>
<body>
<div id="show" class="container">
    <div id="owl_demo" class="owl-carousel" style="height: 100%">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
    </div>
</div>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/js/plugins/owl_carousel/js/owl.carousel.js}"></script>
<script type="text/javascript">
    $('document').ready(function () {
        // jQuery OwlCarousel v1.31  需要加英文冒号
        $('#owl_demo').owlCarousel({
            'items': 4,
            'autoPlay': 2000,
            'smartSpeed': 2000, //切换速度
            // 'scrollPerPage': true,
            'stopOnHover': true,
            'pagination': false,
            'paginationNumbers': true,
            'dots': false,//显隐导行
            'nav': false, //显示左右箭头
            'navText': false, //左右箭头html
            // navText: ['<span class="iconfont icon-xiangshang"></span>', '<span class="iconfont icon-xiangshang"></span>'],//左右箭头内容
            'loop': true,//循环轮播
            'autoplayHoverPause': true,//鼠标悬停停止自动播放
            'margin': 10, //轮播项目之间的边距
        });
    })
</script>
</body>
</html>

posted @ 2021-12-02 23:28 一只桔子2233 阅读(205) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律

历史上的今天：
2020-12-02 Echarts图表相关技术点
2018-12-02 10.3 .NET 3.5 中的扩展方法

公告

昵称：一只桔子2233
园龄： 8年3个月
粉丝： 16
关注： 18

+加关注

2025年3月

日

一

二

三

四

五

六

Kikyo

纸上得来终觉浅，绝知此事要躬行。

jQuery 幻灯片插件 owl_carousev1.31 使用

1、js文件

2、代码

公告

搜索

我的标签

随笔分类

随笔档案

阅读排行榜

最新评论

	<!DOCTYPE html>
	<html lang="zh" xmlns:th="http://www.thymeleaf.org">
	<head>
	<title>OwlCarousel</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta http-equiv="Pragma" content="no-cache"/>
	<meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
	<meta http-equiv="Expires" content="0"/>
	<link th:href="@{/js/plugins/owl_carousel/css/owl.carousel.css}" rel="stylesheet">
	<link th:href="@{/js/plugins/owl_carousel/css/animate.css}" rel="stylesheet">
	<style type="text/css">
	.container {
	width: 1903px;
	height: 600px;
	}

	.owl-carousel, .owl-wrapper-outer, .owl-wrapper, .owl-item {
	height: 100%;
	}

	.owl-item {
	background-color: lightgray;
	padding-top: 2%;
	}

	.item {
	background-color: lightcoral;
	}
	</style>
	<body>
	<div id="show" class="container">
	<div id="owl_demo" class="owl-carousel" style="height: 100%">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">11</div>
	<div class="item">12</div>
	<div class="item">13</div>
	<div class="item">14</div>
	<div class="item">15</div>
	</div>
	</div>
	<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/plugins/owl_carousel/js/owl.carousel.js}"></script>
	<script type="text/javascript">
	$('document').ready(function () {
	// jQuery OwlCarousel v1.31 需要加英文冒号
	$('#owl_demo').owlCarousel({
	'items': 4,
	'autoPlay': 2000,
	'smartSpeed': 2000, //切换速度
	// 'scrollPerPage': true,
	'stopOnHover': true,
	'pagination': false,
	'paginationNumbers': true,
	'dots': false,//显隐导行
	'nav': false, //显示左右箭头
	'navText': false, //左右箭头html
	// navText: ['<span class="iconfont icon-xiangshang"></span>', '<span class="iconfont icon-xiangshang"></span>'],//左右箭头内容
	'loop': true,//循环轮播
	'autoplayHoverPause': true,//鼠标悬停停止自动播放
	'margin': 10, //轮播项目之间的边距
	});
	})
	</script>
	</body>
	</html>