码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-12-22 10:11:47      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

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>

 

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

标签:

原文地址:http://www.cnblogs.com/yingzi1028/p/5065677.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!