bootstrap 实现轮播图

来源：互联网发布：淘宝无线端链接转换编辑：程序博客网时间：2024/06/15 14:05
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Carousel</title><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"><style>/*调整容器大小*/#myCarousel {width: 600px;}/*调整圆圈链接ol位置*/.carousel-indicators {bottom: -5px;}/*调整轮播图位置*/#carousel-example-generic {top: 100px;}</style></head><body><div class="container" id="myCarousel"><!-- 轮播图容器 --><div id="carousel-example-generic" class="carousel slide"><!-- 轮播图上的圆圈链接 --><ol class="carousel-indicators radiou"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><!-- 轮播图具体内容 --><div class="carousel-inner"><div class="item active"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510071051013&di=fe871132a698a7e62aa1036240aa221b&imgtype=jpg&src=http%3A%2F%2Fimg.evolife.cn%2F2015-01%2Fbde62420fc3165f8_thumb.jpg" style="height: 300px; width:600px"><!-- 图上文字 --><div class="carousel-caption"><h4>Red Car Fly</h4><p>ajsuten hsdfupeia jsdtfua</p></div></div><div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510077934469&di=d7d222fb5b5465fde75425e984cf2b90&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F7a899e510fb30f2478787ac5c295d143ac4b0311.jpg" style="height: 300px; width:600px"><!-- 图上文字 --><div class="carousel-caption"><h4>White Car Fly</h4><p>ajsuten hsdfupeia jsdtfua</p></div></div><div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510077977327&di=404f5cf97186c344d0a34a343f8be5b2&imgtype=0&src=http%3A%2F%2Fimg.autofan.com.cn%2F2016-12-05%2F16%2Ff206c101380a.JPG" style="height: 300px; width:600px"><!-- 图上文字 --><div class="carousel-caption"><h4>Blue Car Fly</h4><p>ajsuten hsdfupeia jsdtfua</p></div></div></div><!-- 轮播图上的向前一图切换链接 --><a href="#carousel-example-generic" data-slide="prev" class="left carousel-control"><span class="glyphicon glyphicon-chevron-left"></span></a><!-- 轮播图上的向后一图切换链接 --><a href="#carousel-example-generic" data-slide="next" class="right carousel-control"><span class="glyphicon glyphicon-chevron-right"></span></a></div></div><!-- 引入jquery与bootstrap的js文件 --><script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script>$(".carousel").carousel({interval:2000 //每隔两秒自动轮播})</script></body></html>
阅读全文
0 0