快速实现轮播图片效果

article/2025/9/23 11:30:36

效果描述：

轮播图，默认情况下循环向左轮播，点击左右箭头实现切换到上一张以及下一张，点击小圆点将直接显示单击的那张图片。

实现代码：

使用bootstrap中的Carousel插件实现

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>轮播图</title><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/><link rel="stylesheet" href="css/bootstrap.min.css"/><style>body{padding: 30px;}#myCarousel{width: 550px;}h3,p{color: yellow;}img{width: 100%;}/*修改插件中的样式的，就是用自己定义的样式覆盖原来的样式*/.carousel-indicators li {display: inline-block;width: 10px;height: 10px;margin: 1px;text-indent: -999px;/*隐藏对象内的内容功能，比如隐藏div内的文字等*/cursor: pointer;/*光标*/border: 2px solid #e5e600;/*圆圈边框颜色*/border-radius: 10px;}.carousel-indicators .active {width: 13px;height: 13px;margin: 0;background-color: #f04c15bd;/*圆圈里边的颜色*/       }</style>
</head><body>
<div id="myCarousel" class="carousel slide" data-ride="carousel"><!-- 图片容器 --><div class="carousel-inner"><div class="item active"><img src="image/picture1.jpg" alt="..."><div class="carousel-caption"><h3>5v5MOBA</h3><p>三秒下载，急速畅玩</p></div></div><div class="item"><img src="image/picture2.jpg" alt="..."><div class="carousel-caption"><h3>激战战场</h3><p>热血来袭</p></div></div></div><!-- 圆点 --><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li></ol><!-- 控制向左或向右的箭头 --><a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><script src="js/jquery-1.12.4.js"></script>
<script src='js/bootstrap.min.js'></script></script>
</body>
</html>

小白提示：注意图片的路径

使用到的工具bootstrap.min.css，jquery-1.12.4.js，bootstrap.min.js，字体图标(Glyphicons)版本略有差异亦可