bootstrap中的carosel

来源：互联网发布：鸭鸭网络数字点卡平台编辑：程序博客网时间：2024/05/29 08:40
实验代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="./public/bootstrap/css/bootstrap.css"><script type="text/javascript" src="public/bootstrap/js/jquery.js"></script><script type="text/javascript" src="public/bootstrap/js/bootstrap.min.js"></script><script type="text/javascript" src="public/bootstrap/js/carouse.js"></script><title>无标题文档</title></head><body><div class="carousel slide" id="main" style="width:500px; margin:200px">    <ol class="carousel-indicators">        <li data-target="#main" data-slide-to="0" class="active"></li>            <li data-target="#main" data-slide-to="1"></li>            <li data-target="#main" data-slide-to="2"></li>        </ol>    <div class="carousel-inner">        <div class="active item">            <img src="images/000 (2).jpg" style="width:100%;" />                <div class="carousel-caption">                <h4>第1张</h4>                    <p>这是第1张图</p>                </div>            </div>            <div class="item">            <img src="images/2.jpg" style="width:100%;" />                <div class="carousel-caption">                <h4>第2张</h4>                    <p>这是第2张图</p>                </div>            </div>             <div class="item">            <img src="images/6 (31).jpg" style="width:100%;" />                <div class="carousel-caption">                <h4>第3张</h4>                    <p>这是第3张图</p>                </div>            </div>        </div>         <a class="carousel-control left" href="#main" data-slide="prev">‹</a><a class="carousel-control right" href="#main" data-slide="next">›</a>    </div><script>$('.carousel').carousel({  interval: 2000})$('.carousel').carousel()</script></body></html>
效果图：