owl.carousel轮播插件实例化一次



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模块title>
    
    <link rel="stylesheet" href="owl.carousel.min.css"/>
    
    <script src="jquery.min.js">script>
    <script src="owl.carousel.min.js">script>
head>
<style>
    body {
        font-family: Open Sans, sans-serif;
        font-size: 14px;
        color: #959595
    }

    body a {
        text-decoration: none
    }

    body a:hover {
        text-decoration: none
    }

    body a:focus {
        outline: none;
        text-decoration: none
    }

    .owl-carousel .item {
        text-align: center;
        padding: 0 10px;
    }

    .owl-carousel .item .image {
        padding: 40px 0 20px;
    }

    .owl-carousel .item .image img {
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }

    .owl-carousel .item .title {
        margin-bottom: 0;
    }

    .owl-carousel .item .title a {
        display: block;
        color: #626262;
        font-size: 20px;
        padding: 10px 0;
    }

    .owl-carousel .item .intro {
        color: #9A9A9A;
    }

    .owl-carousel {
        display: block;
    }


style>
<body>

<div class="owl-carousel" data-owl='{"items":4,"loop": true,"dots": false,"autoplay":true}'>
    <div class="items">
        <div class="item">
            <div class="image">
                <a href="#"><img src="1-1.jpg" alt="">a>
            div>
            <h3 class="title">
                <a href="#">11a>
            h3>
            <div class="intro">
                <p>111111111p>
            div>
        div>
        <div class="item">
            <div class="image">
                <a href="#"><img src="1-1.jpg" alt="">a>
            div>
            <h3 class="title">
                <a href="#">222a>
            h3>
            <div class="intro">
                <p>22222p>
            div>
        div>
        <div class="item">
            <div class="image">
                <a href="#"><img src="1-1.jpg" alt="">a>
            div>
            <h3 class="title">
                <a href="#">333a>
            h3>
            <div class="intro">
                <p>3333333333p>
            div>
        div>
        <div class="item">
            <div class="image">
                <a href="#"><img src="1-1.jpg" alt="">a>
            div>
            <h3 class="title">
                <a href="#">444a>
            h3>
            <div class="intro">
                <p>444444444p>
            div>
        div>
        <div class="item">
            <div class="image">
                <a href="#"><img src="1-1.jpg" alt="">a>
            div>
            <h3 class="title">
                <a href="#">555a>
            h3>
            <div class="intro">
                <p>5555555555p>
            div>
        div>
        <div class="item">
            <div class="image">
                <a href="#"><img src="1-1.jpg" alt="">a>
            div>
            <h3 class="title">
                <a href="#">666a>
            h3>
            <div class="intro">
                <p>666666666666p>
            div>
        div>
        <div class="item">
            <div class="image">
                <a href="#"><img src="1-1.jpg" alt="">a>
            div>
            <h3 class="title">
                <a href="#">777a>
            h3>
            <div class="intro">
                <p>777777777777777777p>
            div>
        div>
        <div class="item">
            <div class="image">
                <a href="#"><img src="1-1.jpg" alt="">a>
            div>
            <h3 class="title">
                <a href="#">888a>
            h3>
            <div class="intro">
                <p>8888888888888888888p>
            div>
        div>
    div>
div>
<div class="owl-carousel" data-owl='{"items":3,"loop": true,"dots": false}'>
    <div class="items">
        <div class="item">
            <div class="image">
                <a href="#"><img src="1-1.jpg" alt="">a>
            div>
            <h3 class="title">
                <a href="#">111a>
            h3>
            <div class="intro">
                <p>11111111111111111p>
            div>
        div>
        <div class="item">
            <div class="image">
                <a href="#"><img src="1-1.jpg" alt="">a>
            div>
            <h3 class="title">
                <a href="#">222a>
            h3>
            <div class="intro">
                <p>222222222222222222p>
            div>
        div>
        <div class="item">
            <div class="image">
                <a href="#"><img src="1-1.jpg" alt="">a>
            div>
            <h3 class="title">
                <a href="#">333a>
            h3>
            <div class="intro">
                <p>333333333333333333p>
            div>
        div>
        <div class="item">
            <div class="image">
                <a href="#"><img src="1-1.jpg" alt="">a>
            div>
            <h3 class="title">
                <a href="#">444a>
            h3>
            <div class="intro">
                <p>4444444444444444444p>
            div>
        div>
        <div class="item">
            <div class="image">
                <a href="#"><img src="1-1.jpg" alt="">a>
            div>
            <h3 class="title">
                <a href="#">555a>
            h3>
            <div class="intro">
                <p>5555555555555555555p>
            div>
        div>
        <div class="item">
            <div class="image">
                <a href="#"><img src="1-1.jpg" alt="">a>
            div>
            <h3 class="title">
                <a href="#">666a>
            h3>
            <div class="intro">
                <p>66666666666666666666p>
            div>
        div>
        <div class="item">
            <div class="image">
                <a href="#"><img src="1-1.jpg" alt="">a>
            div>
            <h3 class="title">
                <a href="#">777a>
            h3>
            <div class="intro">
                <p>77777777777777777777p>
            div>
        div>
        <div class="item">
            <div class="image">
                <a href="#"><img src="1-1.jpg" alt="">a>
            div>
            <h3 class="title">
                <a href="#">888a>
            h3>
            <div class="intro">
                <p>8888888888888888888888p>
            div>
        div>
    div>
div>
<script>
    if ($(".owl-carousel").length > 0) {
        $(".owl-carousel").each(function () {
            var data = $(this).data("owl");
            $(this).find(".items").owlCarousel(data);
        })
    }
    /*********
     官网:http://www.owlgraphic.com/owlcarousel/
     Github地址:https://github.com/OwlCarousel2/OwlCarousel2
     中文文档:http://www.htmleaf.com/jQuery/Slideshow-Scroller/201502161387.html
     在线示例:http://owlcarousel2.github.io/OwlCarousel2/demos/basic.html
     *********/
script>
body>
html>

你可能感兴趣的:(插件,javascript)