Summer-Lin/carousel

jQuery简易轮播图

动态图片

CSS代码

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<link rel="stylesheet" href="jquery.carousel.css">

HTML代码

<div class="carousel">
        <ul>
            <li>
                <img src="images/15i58PIC8bY_1024.jpg" alt="">

            </li>
            <li>
                <img src="images/11bOOOPIC57_1024.jpg" alt="">
            </li>
            <li>
                <img src="images/42bOOOPIC17_1024.jpg" alt="">
            </li>
            <li>
                <img src="images/86bOOOPIC6f_1024.jpg" alt="">
            </li>
            <li>
                <img src="images/7169564_150201558312_2.jpg" alt="">
            </li>
            <li>
                <img src="images/11580677_090537203000_2.jpg" alt="">
            </li>
            <li>
                <img src="images/0018031184864859_b.jpg" alt="">
            </li>
            <li>
                <img src="images/CgQDr1PUudmAbC0sAAPmtISRmjM32500.jpg" alt="">
            </li>
        </ul>
    </div>

JS代码

<script src="jquery-1.11.3.js"></script>
<script src="jquery.carousel.js"></script>
 <script>
     $(function () {

         $('.carousel').carousel()

     })
 </script>
 

代码下载

1、git clone git@github.com:Summer-Lin/carousel.git
2、打开index.html