Bootstrap轮播图的使用和理解4
本文实例为大家分享了Bootstrap轮播图的实现代码，供大家参考，具体内容如下
<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1">
<title>Bootstrap模板</title>
<linkhref="lib/bootstrap/css/bootstrap.css"rel="stylesheet">
<!--[ifltIE9]>
<scriptsrc="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<scriptsrc="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
img{
width:100%;
height:100%;
}
p{
text-align:center;
}
</style>
</head>
<body>
<!--轮播图部分-->
<divid="carousel-example-generic"class="carouselslide"data-ride="carousel">
<!--Indicators-->
<!--指示器-->
<olclass="carousel-indicators">
<lidata-target="#carousel-example-generic"data-slide-to="0"class="active"></li>
<lidata-target="#carousel-example-generic"data-slide-to="1"></li>
<lidata-target="#carousel-example-generic"data-slide-to="2"></li>
</ol>
<!--Wrapperforslides-->
<!--包裹幻灯片-->
<divclass="carousel-inner"role="listbox">
<divclass="itemactive">
<imgsrc="images/轮播1.png"alt="轮播图1">
<divclass="carousel-caption">
轮播图1
</div>
</div>
<divclass="item">
<imgsrc="images/轮播2.png"alt="轮播图2">
<divclass="carousel-caption">
轮播图2
</div>
</div>
<divclass="item">
<imgsrc="images/轮播3.png"alt="轮播图3">
<divclass="carousel-caption">
轮播图3
</div>
</div>
<p>轮播图尝试</p>
</div>
<!--Controls-->
<!--控制-->
<!--向左滑动-->
<aclass="leftcarousel-control"href="#carousel-example-generic"role="button"data-slide="prev">
<spanclass="glyphiconglyphicon-chevron-left"aria-hidden="false"></span>
<spanclass="sr-only">Previous</span>
</a>
<!--向右滑动-->
<aclass="rightcarousel-control"href="#carousel-example-generic"role="button"data-slide="next">
<spanclass="glyphiconglyphicon-chevron-right"aria-hidden="true"></span>
<spanclass="sr-only">Next</span>
</a>
</div>
<!--js控制轮播图-->
<buttonid="prev">向前</button>
<buttonid="next">向后</button>
<buttonid="pause">停止</button>
<buttonid="start">开始</button>
<buttonid="jump">到第二张</button>
<scriptsrc="lib/jquery/jquery.js"></script>
<scriptsrc="lib/bootstrap/js/bootstrap.js"></script>
<!--轮播图还支持js控制-->
<script>
$(function(){
$('.carousel').carousel({
interval:2000,//轮播间隔
pause:"hover",//鼠标悬停在轮播图上，是否停止滚动
wrap:true,//
keyboard:true//响应键盘事件
});
$("#prev").click(function(event){
$('.carousel').carousel('prev')//周期上一个项目。
});
$("#next").click(function(event){
$('.carousel').carousel('next')//周期到下一个项目。
});;
$("#pause").click(function(event){
$('.carousel').carousel('pause')//从通过项目循环停止传送带。
});;
$("#start").click(function(event){
$('.carousel').carousel('cycle')//通过传送带项目周期从左到右。
});;
$("#jump").click(function(event){
$('.carousel').carousel(1)//循环传送带到一个特定的帧（0为主，类似于数组）。
});;
});
</script>
</body>
</html>
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
BootstrapTable使用教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。