用bootstrap实现多张图片手动轮回

html代码

<script type="text/javascript" src="/plugin/jquery-easyui-1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="/javascripts/bootstrap.min.js"></script>
    <style type="text/css">
        #myCarousel{
            margin:0 auto;
            width:500px;
        }
    </style>



<body style="background-color: pink">
<div id="myCarousel" class="carousel slide" style="margin-top: 150px;">
    <div class="carousel-inner">
        <div class="active item" ><img src="images/2.jpg" width="450px" height="200px"/></div>
        <div class="item" ><img src="images/3.jpg" width="450px" height="200px"/></div>
        <div class="item" ><img src="images/4.jpg" width="450px" height="200px"/></div>
    </div>
</div>
<a style="margin-left: 450px; margin-top: 280px; width:100px;" class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a style="margin-right: 500px;  margin-top: 280px;width:100px;" class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</body>

 

posted @ 2015-12-22 09:53  爱喝酸奶的吃货  阅读(561)  评论(0)  编辑  收藏  举报