基于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 >

全部评论

相关推荐

投递美团等公司10个岗位
点赞 评论 收藏
转发
1 4 评论
分享
牛客网
牛客企业服务