master

分支 (1)

管理

管理

master

CarouselDemo
/
index.html

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>旋转木马 幻灯片开发</title>
        <link rel="stylesheet" type="text/css" href="carousel.css">
        <script src="jquery.js"></script>
        <script src="carousel.js"></script>
    </head>
    <body style="padding:50px">
        <div class="J_Poster poster-main" data-setting='{
            "width":1000,
            "height":270,
            "posterWidth":640,
            "posterHeight":270,
            "scale":0.9,
            "speed":300,
            "autoPlay":true,
            "delay":1000,
            "verticalAlign":"middle"
        }'>
            <div class="poster-btn poster-prev-btn"></div>
            <ul class="poster-list">
                <li class="poster-item"><a href="#"><img src="1.jpg" width="100%"></a></li>
                <li class="poster-item"><a href="#"><img src="2.jpg" width="100%"></a></li>
                <li class="poster-item"><a href="#"><img src="3.jpg" width="100%"></a></li>
                <li class="poster-item"><a href="#"><img src="4.jpg" width="100%"></a></li>
                <li class="poster-item"><a href="#"><img src="5.jpg" width="100%"></a></li>
              </ul>
            <div class="poster-btn poster-next-btn"></div>
        </div>
    </body>
    <script>

         $(function () {
             //Carousel

             Carousel.init($(".J_Poster"),)
         })

    </script>
</html>