基于Bootstrap实现图片轮播效果
本文实例为大家分享了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">
<!--上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！-->
<title>图片轮播_01</title>
<!--Bootstrap-->
<linkhref="../bootstrap-3.3.5-dist/css/bootstrap.min.css"rel="stylesheet">
<scriptsrc="../js/jquery-2.1.4.min.js"></script>
<scriptsrc="../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!--
作者：凯尔
时间：2016-02-20
描述：
carousel
date-interval="4000"停留时间/幅图
支持键盘左右方向键对图片进行轮播方向选择
-->
<divclass="container">
<divstyle="width:960px;height:400px;margin:auto;padding:auto;">
<divid="carousel-example-generic"class="carouselslide">
<olclass="carousel-indicators">
<lidata-target="#carousel-example-generic"data-slide-to="0"class="active"></li>
<lidata-target="#carousel-example-generic"data-slide-to="1"class=""></li>
<lidata-target="#carousel-example-generic"data-slide-to="2"class=""></li>
<lidata-target="#carousel-example-generic"data-slide-to="3"class=""></li>
</ol>
<divclass="carousel-inner">
<divclass="itemactive">
<imgsrc="../img/图片轮播/pic01.jpg"/>
</div>
<divclass="item">
<imgsrc="../img/图片轮播/pic02.jpg"/>
<!--
图片上要显示的文字
-->
<divclass="carousel-caption">
<h3>联想校园大使</h3></div>
</div>
<divclass="item">
<imgsrc="../img/图片轮播/pic03.jpg"/>
</div>
<divclass="item">
<imgsrc="../img/图片轮播/pic04.jpg"/>
</div>
</div>
<!--Controls-->
<aclass="leftcarousel-control"href="#carousel-example-generic"role="button"data-slide="prev">
<spanclass="glyphiconglyphicon-chevron-left"aria-hidden="true"></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>
</div>
</div>
<!--设定时间间隔，通过JavaScript，这样做相对于css属性设定而言，可以自启动，无需人为进行干预-->
<script>
$(".carousel").carousel({
interval:4000
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。