jimkk 2020-12-07 19:42 采纳率: 100%
浏览 7
已采纳

想要网站的某个小功能的代码

想要一个某个网站里功能的代码，要嵌入到别的网站里可以直接使用的html代码，具体参见https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent 

 

就是这个banner下面的底部焦点交互代码

  • 写回答

2条回答 默认 最新

  • 论闲 2020-12-09 17:56
    关注
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		 
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		 
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<style type="text/css">
		
			.item {
				width: 100%;
				height: 200px;
				background: skyblue;
			}
		
			.carousel-indicators .active {
			    background: none;
			}
			.carousel-indicators  li {
				position: relative;
				margin: 0;
				width: 50px !important;
				height: 6px !important;
				overflow: hidden;
				border-radius: 5px;
			}
			/* ----------------关键代码---b--------------- */
			/* 给盒子加上固定定位 */
			.carousel-indicators li div {
			    position: absolute;
			    top: 0;
			    left: 0;
				height: 100%;
				width: 100%;
				display: none;
			}
			/* 给盒子加上动画 */
			.carousel-indicators li.active  div {
				background: #fff;
				display: block;
			    animation: showdiv 4s 1 linear;
			    -webkit-animation: showdiv 4s 1 linear;
			}
			/* 动画 */
			@keyframes showdiv{
				from{
					width: 0px;
				}
				to{
					width: 50px;
				}
			}
			/* ----------------关键代码---e-------------- */
		</style>
	</head>
	<body>
		<div id="myCarousel" class="carousel slide">
		    <!-- 轮播（Carousel）指标 -->
		    <ol class="carousel-indicators">
		          <li data-target="#myCarousel" data-slide-to="0" class="active">
					  <!-- 给每个指示点里加一个空盒子 关键代码-->
					  <div></div>
				  </li>
		          <li data-target="#myCarousel" data-slide-to="1">
					  <div></div>
				  </li>
		          <li data-target="#myCarousel" data-slide-to="2">
					  <div></div>
				  </li>
		     </ol>
		    <!-- 轮播（Carousel）项目 -->
		    <div class="carousel-inner">
		        <div class="item active">
		            <div class="carousel-caption">标题 1</div>
		        </div>
		        <div class="item">
		            <div class="carousel-caption">标题 2</div>
		        </div>
		        <div class="item">
		            <div class="carousel-caption">标题 3</div>
		        </div>
		    </div>
		    <!-- 轮播（Carousel）导航 -->
		    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
		        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		        <span class="sr-only">Previous</span>
		    </a>
		    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
		        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		        <span class="sr-only">Next</span>
		    </a>
		</div> 
		<script type="text/javascript">
			// 自动循环
			$("#myCarousel").carousel('cycle');
		</script>
	</body>
</html>

    轮播用的Bootstrap的 ，可以直接打开看效果，基本思路就是在指示点上面再加一层盒子，进行宽度的变化，最后形成进度条的感觉

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度