基于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" > &lsaquo; </ a >
< a class ="carousel-control right" href ="#myCarousel"  
data-slide ="next" > &rsaquo; </ a >
</ div >
</ div >

全部评论

相关推荐

点赞 评论 收藏
分享
09-17 20:37
已编辑
长沙学院 Java
涂莱:学院本重心后移,金10银11,甚至金11银12,战线拉长一点,对于学院本来说秋招是个持久战,加油吧
听劝,我这个简历该怎么改...
点赞 评论 收藏
分享
评论
1
4
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务