想要生成帶有貓頭鷹圖像的旋轉木馬

我想要一個貓頭鷹旋轉木馬上的隱藏div。請幫幫我。我打電話給貓頭鷹傳送帶的所有css文件。這裏是我的呼喚CSS文件想要生成帶有貓頭鷹圖像的旋轉木馬

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/owl-carousel/owl.carousel.css">

/owl-carousel/owl.theme.css 「> /owl-carousel/owl.transitions.css」>

這是我的呼籲JS文件

<script src="<?php echo get_template_directory_uri(); ?>/owl-carousel/owl.carousel.min.js"></script>

/owl-carousel/active.js「>

，我起牀我的HTML源文件

<div id="owl-demo" class="owl-carousel"> 
    <div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div> 
    <div><img src="http://placehold.it/1170x400/42bdc2/FFFFFF"></div> 
    <div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div> 
    <div><img src="http://placehold.it/1170x200/42bdc2/FFFFFF"></div> 
    <div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div> 
    <div><img src="http://placehold.it/1170x250/42bdc2/FFFFFF"></div> 
    <div><img src="http://placehold.it/1170x350/42bdc2/FFFFFF"></div> 
    <div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div> 
    <div><img src="http://placehold.it/1170x100/42bdc2/FFFFFF"></div> 
    <div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div> 
</div>

來源

2015-05-10 Belal Khan

HTML代碼利用slick.js

<!DOCTYPE html> 
<html> 
<head> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.css"/> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"/> 
    <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script> 
    <script src="app2.js"></script> 
    <style> 
    body { 
    background-color: lightblue; 
    } 
    #slickslide { 
     height: 200px; 
     background: lightgray; 
    } 
    #content { 
     margin: auto; 
     padding: 20px; 
     width: 80%; 
    } 

    </style> 
</head> 
<body> 

    <div id="demo"></div> 
<div id=content> 
    <div id="slickslide" slick=""> 
    <div><h1>Test1</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut. </p></div> 
    <div><h1>Test2</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut. </p></div> 
    <div><h1>Test3</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut. </p></div> 
    <div><h1>Test4</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut. </p></div> 
    <div><h1>Test5</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut. </p></div> 
    </div> 
</div> 
</body> 
</html>

Javascript代碼

$(document).ready(function(){ 
    $('#slickslide').slick({ 
     dots: true, 
     infinite: true, 
     speed: 300, 
     autoplay:true, 
     autoplaySpeed: 1000, 
     slidesToShow: 1, 
     slidesToScroll: 1 
    }); 
});

來源

2015-05-11 00:25:12

的替換DIV內容與貓頭鷹圖片 –

想要生成帶有貓頭鷹圖像的旋轉木馬

回答

相關問題