基于Bootstrap实现图片轮播效果_

1、基于Bootstrap实现图片轮播效果_ 本文实例为大家分享了bootstrap图片轮播效果的实现代码，供大家参考，具体内容如下 !DOCTYPE html html lang=zh-CN head meta charset=utf-8 meta http-equiv=X-UA-Compatible content=IE=edge meta name=viewport content=width=device-width, initial-scale=1 !- 上述3个meta标签*必需*放在最前面，任何其他内容都*必需*跟随其后！ - title图片轮播_01/title !- Bootst

2、rap - link href=./bootstrap-3.3.5-dist/css/bootstrap.min.css rel=stylesheet script src=./js/jquery-2.1.4.min.js/script script src=./bootstrap-3.3.5-dist/js/bootstrap.min.js/script /head body !- ：凯尔 时间：2021-02-20 描述： carousel date-interval=4000停留时间/幅图 支持键盘左右方向键对图片进行轮播方向选择 - div class=container div st

3、yle=width:960px;height: 400px;margin: auto;padding: auto; div id=carousel-example-generic class=carousel slide ol class=carousel-indicators li data-target=#carousel-example-generic data-slide-to=0 class=active/li li data-target=#carousel-example-generic data-slide-to=1 class=/li li data-target=#caro

4、usel-example-generic data-slide-to=2 class=/li li data-target=#carousel-example-generic data-slide-to=3 class=/li /ol div class=carousel-inner div class=item active img src=./img/图片轮播/pic01.jpg / /div div class=item img src=./img/图片轮播/pic02.jpg / !- 图片上要显示的文字 - div class=carousel-caption h3联想校内大使/h3

5、/div /div div class=item img src=./img/图片轮播/pic03.jpg / /div div class=item img src=./img/图片轮播/pic04.jpg / /div /div !- Controls - a class=left carousel-control href=#carousel-example-generic role=button data-slide=prev span class=glyphicon glyphicon-chevron-left aria-hidden=true/span span class=sr-onlyPrevious/span /a a class=right carousel-control href=#carousel-example-generic role=button data-slide=next span class=glyphicon glyphicon-chevron-right aria-hidden=true/span span class=sr-onlyNext/span /a /div /div /div !-设定时间间隔，通过JavaScript，这样做相对于css属性设定而言，可以自启动，无需人为进行干预- script $(.caro