如何在HTML网页中左右两边插入滚动图片，中间显示输入文字，求它的代码？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在HTML网页中左右两边插入滚动图片，中间显示输入文字，求它的代码？相关的知识，希望对你有一定的参考价值。
请写代码，不要灌水。谢谢！
参考技术A <html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
divfloat:left;display:block; margin:0px; padding:0px;
.quan width:900px; height:100px;
.left width:300px; height:100px;
.left img width:100px; height:100px;
.mid width:300px; height:100px; text-align:center;
.right width:300px; height:100px;
.right img width:100px; height:100px;
</style>
<body>
<div class="quan">
<div class="left"><marquee><img src="1.jpg"><img src="2.jpg"><img src="3.jpg"></marquee></div>
<div class="mid">输入文字部分</div>
<div class="right"><marquee><img src="1.jpg"><img src="2.jpg"><img src="3.jpg"></marquee></div>
</div>
</body>
</html>
vue中轮播组件，实现默认显示3张图片，中间显示全部两边显示部分
参考技术A 实现的效果图片展示如下：找了，YDui,Museui发现都不可以，因为他们是display:none,于是安装了swiper
关于在同一个页面使用多个swiper,多个轮播出现冲突的问题?--
首先可以给swiper-container这个层级的div加多个专属类名或者id,然后在分页器或者左右切换的按钮也是如此
npm install swiper
import 'swiper/dist/css/swiper.min.css'
import Swiper from "swiper"
5.写在mounted里面，created节点还没生成
loop:是否无缝滚动，环形的。
centeredSlides:active图片在中间，不是在最左边。
spaceBetween:两边间距是多少，看UI设计，这里这个参数很重要。
6.css
```
.swiper-container
margin-top: 0.2rem;
width: 100%;
height: 2.72rem;
overflow: visible !important;
position: relative;
.swiper-container .swiper-wrapper .swiper-slide
width: 6.62rem;
border-radius: 0.12rem;
.swiper-container .swiper-wrapper .swiper-slide img
width: 100%;
height: 2.72rem;
border-radius: 0.12rem;
.swiper-container .swiper-wrapper .swiper-slide-prev
margin-top: 0.18rem;
height: 2.5rem !important;
.swiper-container .swiper-wrapper .swiper-slide-prev img
height: 2.4rem !important;
.swiper-container .swiper-wrapper .swiper-slide-next
margin-top: 0.18rem;
height: 2.5rem !important;
.swiper-container .swiper-wrapper .swiper-slide-next img
height: 2.4rem !important;
.swiper-container .swiper-wrapper .swiper-slide-active
width: 6.62rem;
.swiper-pagination
bottom: 0.1rem !important;
```
方法二：
以上是关于如何在HTML网页中左右两边插入滚动图片，中间显示输入文字，求它的代码？的主要内容，如果未能解决你的问题，请参考以下文章