你能帮我写一个HTML推广广告吗,要有图片轮播,要适应屏幕大小,要有文字介绍,写个示例源码,最好用一些常用的插件
时间: 2023-04-03 16:03:12 浏览: 96
当然可以帮您写一个HTML推广广告,以下是一个示例源码,包含图片轮播和文字介绍,同时也适应不同屏幕大小。这个示例使用了jQuery和Bootstrap插件,它们都是非常常用的插件。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML推广广告</title>
<!-- 引入Bootstrap样式 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<!-- 引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 引入Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<!-- 引入轮播插件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<style>
.carousel-item img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>HTML推广广告</h1>
<div class="row">
<div class="col-md-8">
<!-- 轮播 -->
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/id/1018/1000/500" alt="广告1">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/id/1015/1000/500" alt="广告2">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/id/1019/1000/500" alt="广告3">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-4">
<!-- 文字介绍 -->
<h3>广告标题</h3>
<p>这里是广告的文字介绍,可以写一些吸引人的话,让用户点击广告。</p>
<a href="#" class="btn btn-primary">点击查看</a>
</div>
</div>
</div>
<script>
// 初始化轮播插件
$('.carousel').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});
</script>
</body>
</html>
```
希望这个示例对您有所帮助!
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)