基于bootstrap的图片轮播功能
插入js及css支持:
<
link
rel
="stylesheet"
href
="css/bootstrap.min.css"
/>
<
script
src
="js/jquery-1.9.1.min.js"
></
script
>
<
script
src
="js/bootstrap.min.js"
></
script
>
HTML代码:
<
div
id
="pictures"
class
="item"
>
<
div
id
="myCarousel"
class
="carousel slide">
<!--
轮播(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"
>
<
div
class
="item active"
>
<
img
src
="images/gf.jpg"
class
="img-responsive"
alt
="First slide"
>
</
div
>
<
div
class
="item">
<
img
src
="images/psb.jpg"
class
="img-responsive"
alt
="Second slide"
>
</
div
>
<
div
class
="item"
>
<
img
src
="images/uyt.jpg"
class
="img-responsive"
alt
="Third slide"
>
</
div
>
</
div
>
<!--
轮播(Carousel)导航
-->
<
a
class
="carousel-control left"
href
="#myCarousel"
data-slide
="prev"
>
‹
</
a
>
<
a
class
="carousel-control right"
href
="#myCarousel"
data-slide
="next"
>
›
</
a
>
</
div
>
</
div
>