网站最全轮播图制作——只需一个模板即可实现，再也不用担心不会轮播图了

最新推荐文章于 2024-06-18 11:56:32 发布

kaifa996

最新推荐文章于 2024-06-18 11:56:32 发布

阅读量3.4k

点赞数 4

文章标签： css html bootstrap js java

本文链接：https://blog.csdn.net/microlv1996/article/details/108208777

版权

本文提供了一种使用BootStrap创建轮播图的详细方法，包括导入font目录、引用必要的css和js文件，以及展示html代码。通过这个教程，读者可以快速学会如何制作自动滑动的轮播图效果。

摘要由CSDN通过智能技术生成

使用BootStrap制作轮播图：

注：本文所需文件和图片在文章末尾提供

一个页面好看的网站，最少不了的是有自动滑动的图片效果，有这种感觉最能让人眼前一亮。你能知道这是什么技术吗？不用猜了，那就是轮播图了。我总结了多方面轮播图的技术，悟出了这一套属于我们共享的独门绝技。

怎么玩呢？直接上代码。

1、往静态资源根目录上导入 font 目录（重要）：

2、css代码：

注：需要在html页面导入bootstrap.min.css文件

.carousel-inner .item div {
	height: 800px;
	background-size: cover;
}

.carousel-inner .item .img1 {
	background: url("/*图片1*/") no-repeat center;
}

.carousel-inner .item .img2 {
	background: url("/*图片2*/") no-repeat center;
}

.carousel-inner .item .img3 {
	background: url("/*图片3*/") no-repeat center;
}