bootstrap图片自动轮播效果图：
代码实现：
|
<!DOCTYPE html> <htmllang="zh-CN"> <head> <linkrel="stylesheet"href="bootstrap.min.css"/> <linkrel="stylesheet"href="bootstrap-theme.min.css"/> <scriptsrc="jquery.min.js"></script> <scriptsrc="bootstrap.min.js"></script> <style> #div1 {width:600px; height:500px} </style> </head> <body> <divid="div1"> <divid="carousel-example-generic"class="carousel slide"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>
<!-- Wrapper for slides --> <divclass="carousel-inner"role="listbox"> <divclass="item active"> <imgsrc="airplane1.jpg"> </div> <divclass="item"> <imgsrc="airplane2.jpg"> </div> <divclass="item"> <imgsrc="airplane3.jpg"> </div> </div>
<!-- Controls --> <aclass="left carousel-control"href="#carousel-example-generic"role="button"data-slide="prev"> <spanclass="glyphicon glyphicon-chevron-left"id="aaron1"></span> <spanclass="sr-only">Previous</span> </a> <aclass="right carousel-control"href="#carousel-example-generic"role="button"data-slide="next"> <spanclass="glyphicon glyphicon-chevron-right"id="aaron2"></span> <spanclass="sr-only">Next</span> </a> </div> </div> </body> <html> |
以上代码可以实现 div1 中的图片自动轮播，轮播时间默认5000ms。