轮播 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>在线尝试 Bootstrap 实例</title>

<link rel="stylesheet" href="css/bootstrap.min.css">

<script src="js/jquery-1.7.2.min.js"></script>

<script src="js/bootstrap.min.js"></script>

</head>

<body>

<div id="myCarousel" class="carousel slide" style="width: 800px; height: 300px; border: 1px solid red;">

<!-- 轮播（Carousel）指标 -->

<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>

<!-- 轮播（Carousel）项目 -->

<div class="carousel-inner" style="border: 2px solid blue;width: 800px;height: 300px;">

<div class="item active" style="background-color:gold;width: 800px;height: 300px;"></div>

<div class="item" style="background-color: blue;width: 800px;height: 300px;"></div>

<div class="item" style="background-color: black;width: 800px;height: 300px;"></div>

</div>

<!-- 轮播（Carousel）导航 -->

<a class="carousel-control left" href="#myCarousel" data-slide="prev" style="border: 1px solid red;width: 50px;height: 100px;"></a>

<a class="carousel-control right" href="#myCarousel" data-slide="next" style="border: 1px solid red;width: 50px;height: 100px;"></a>

</div>

</body>

</html>
<script>

$(function(){

// 初始化轮播

$(".start-slide").click(function(){

$("#myCarousel").carousel('cycle');

});

// 停止轮播

$(".pause-slide").click(function(){

$("#myCarousel").carousel('pause');

});

// 循环轮播到上一个项目

$(".prev-slide").click(function(){

$("#myCarousel").carousel('prev');

});

// 循环轮播到下一个项目

$(".next-slide").click(function(){

$("#myCarousel").carousel('next');

});

// 循环轮播到某个特定的帧

$(".slide-one").click(function(){

$("#myCarousel").carousel(0);

});

$(".slide-two").click(function(){

$("#myCarousel").carousel(1);

});

$(".slide-three").click(function(){

$("#myCarousel").carousel(2);

});

//自动播放

$('.carousel').carousel({

interval: 2000

})

});

</script>

 

posted @ 2017-01-09 16:20  雪哥儿  阅读(110)  评论(0)    收藏  举报