轮播数据

参考0，参考1，参考2，参考3，参考4
编写轮播图

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bulletin_board</title>
<link rel="stylesheet" href="./bootstrap.min.css">
<script src="./jquery.min.js"></script>
<script src="./bootstrap.min.js"></script>
<style>
.test1{
    width: 400px;
    margin: 100px auto;
    position: absolute;
    top: -100px;
    left: 0px;
}
.test2{
    position: absolute;
    top: 280px;
    text-align: center;
}
.test2 li{
    width: 30px;
    height: 5px;
    border: 1px solid transparent;
    background-color: #717171;
    border-radius: 2px;
    
}
.test2 .active{
    width: 30px;
    height: 5px;
    border: 1px solid transparent;
    background-color:#fff;
    border-radius: 2px;
 
}
body{
    background-color: white;
}
</style>
</head>
<body>	
	<div id="carousel-of-product" class="carousel slide test1" data-ride="carousel" data-interval=3000>
        <!--轮播指标-->
        <ol class="carousel-indicators test2">
            <li data-target="#carousel-of-product" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-of-product" data-slide-to="1" ></li>
            <li data-target="#carousel-of-product" data-slide-to="2" ></li>
            <li data-target="#carousel-of-product" data-slide-to="3" ></li>
            <li data-target="#carousel-of-product" data-slide-to="4" ></li>
        </ol>
        <!--轮播项目-->
        <div class="carousel-inner test1" role="listbox">
            <div class="item active">
                <iframe src="./05.html" width="400" height="300" frameborder="0" scrolling="no" seamless></iframe>
            </div>
            <div class="item">
                <iframe src="./05.html" width="400" height="300" frameborder="0" scrolling="no" seamless></iframe>
            </div>
            <div class="item">
                <iframe src="./05.html" width="400" height="300" frameborder="0" scrolling="no" seamless></iframe>
            </div>
            <div class="item">
                <iframe src="./05.html" width="400" height="300" frameborder="0" scrolling="no" seamless></iframe>
            </div>
            <div class="item">
                <iframe src="./05.html" width="400" height="300" frameborder="0" scrolling="no" seamless></iframe>
            </div>
        </div>		
    </div>
</body>
</html>

编写混合图

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>往年贡献度</title>
<script src="https://cdn.staticfile.org/Chart.js/3.9.1/chart.js"></script>
</head>
<body>
 
<canvas id="myChart" width="400" height="280"></canvas>
<script>
const ctx = document.getElementById('myChart');
const data = {
  labels: [
    '一月份',
    '二月份',
    '三月份'
  ],
  datasets: [{
    type: 'bar',
    label: '柱形图数据集',
    data: [45, 49,52],
    borderColor: 'rgb(255, 99, 132)',
    backgroundColor: 'rgba(255, 99, 132, 0.2)'
  }, {
    type: 'line',
    label: '折线图数据集',
    data: [50, 40, 45],
    fill: false,
    borderColor: 'rgb(54, 162, 235)'
  }]
};
const config = {
  type: 'scatter',
  data: data,
  options: {
    responsive: false, // 设置图表为响应式，根据屏幕窗口变化而变化
    maintainAspectRatio: false,// 保持图表原有比例
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};
const myChart = new Chart(ctx, config);
</script>
 
</body>
</html>

将轮播图和混合图上传到github page，使用iframe标签查看，不能在博客园后台页首HTML代码中使用，可以在博客园后台分类列表的描述中使用

 <iframe src="https://dogleftover.github.io/blog-beautify/extend/bulletin_board.html" width="400" height="300" frameborder="0" scrolling="no" seamless></iframe>

posted @ 2023-12-31 15:33 DogLeftover 阅读(2) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 编写分类按钮

· 散点图(二)：聚合

· 原生js的懒人轮播图

· Vue轮播图实现

· Bootstrap_插件_轮播图和案例_黑马旅游网_分析

阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术

轮播数据

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>bulletin_board</title>
	<link rel="stylesheet" href="./bootstrap.min.css">
	<script src="./jquery.min.js"></script>
	<script src="./bootstrap.min.js"></script>
	<style>
	.test1{
	width: 400px;
	margin: 100px auto;
	position: absolute;
	top: -100px;
	left: 0px;
	}
	.test2{
	position: absolute;
	top: 280px;
	text-align: center;
	}
	.test2 li{
	width: 30px;
	height: 5px;
	border: 1px solid transparent;
	background-color: #717171;
	border-radius: 2px;

	}
	.test2 .active{
	width: 30px;
	height: 5px;
	border: 1px solid transparent;
	background-color:#fff;
	border-radius: 2px;

	}
	body{
	background-color: white;
	}
	</style>
	</head>
	<body>
	<div id="carousel-of-product" class="carousel slide test1" data-ride="carousel" data-interval=3000>
	<!--轮播指标-->
	<ol class="carousel-indicators test2">
	<li data-target="#carousel-of-product" data-slide-to="0" class="active"></li>
	<li data-target="#carousel-of-product" data-slide-to="1" ></li>
	<li data-target="#carousel-of-product" data-slide-to="2" ></li>
	<li data-target="#carousel-of-product" data-slide-to="3" ></li>
	<li data-target="#carousel-of-product" data-slide-to="4" ></li>
	</ol>
	<!--轮播项目-->
	<div class="carousel-inner test1" role="listbox">
	<div class="item active">
	<iframe src="./05.html" width="400" height="300" frameborder="0" scrolling="no" seamless></iframe>
	</div>
	<div class="item">
	<iframe src="./05.html" width="400" height="300" frameborder="0" scrolling="no" seamless></iframe>
	</div>
	<div class="item">
	<iframe src="./05.html" width="400" height="300" frameborder="0" scrolling="no" seamless></iframe>
	</div>
	<div class="item">
	<iframe src="./05.html" width="400" height="300" frameborder="0" scrolling="no" seamless></iframe>
	</div>
	<div class="item">
	<iframe src="./05.html" width="400" height="300" frameborder="0" scrolling="no" seamless></iframe>
	</div>
	</div>
	</div>
	</body>
	</html>