Bootstrapラウンドチャート

18858 ワード

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bootstrap </title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>

<!--data-ride="carousel"  -->

<div id="myCarousel" class="carousel slide"  style="width: 700px">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0"
            class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="image/slide1.png" alt=" ">
        </div>
        <div class="item">
            <img src="image/slide2.png" alt=" ">
        </div>
        <div class="item">
            <img src="image/slide3.png" alt=" ">
        </div>
    </div>
    <a href="#myCarousel" data-slide="prev" class="carousel-control
left">&lsaquo;</a>
    <a href="#myCarousel" data-slide="next" class="carousel-control
right">&rsaquo;</a>
</div>
<button id="cycle" class="btn btn-default"> </button>
<button id="pause" class="btn btn-default"> </button>
<button id="number" class="btn btn-default"> </button>
<button id="prev" class="btn btn-default"> </button>
<button id="next" class="btn btn-default"> </button>




</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    // $('#myCarousel').carousel({
    //     // /2  
    // interval : 2000,
    // // 
    // pause : 'hover',
    // // 
    // //wrap : false,
    // })
    $('#cycle').on('click', function () {
		$('#myCarousel').carousel('cycle');
	});

	$('#pause').on('click', function () {
		$('#myCarousel').carousel('pause');
	});

	$('#number').on('click', function () {
		$('#myCarousel').carousel(2);
	});

	$('#prev').on('click', function () {
		$('#myCarousel').carousel('prev');
	});

	$('#next').on('click', function () {
		$('#myCarousel').carousel('next');
	});

	$('#myCarousel').on('slide.bs.carousel', function () {
		alert(' ');
	});

	$('#myCarousel').on('slid.bs.carousel', function () {
		alert(' ');
	});

</script>

</html>

jsファイルはBootStarp公式サイトでダウンロードして導入する必要があります