我怎样才能删除幻灯片的宽度？如何在幻灯片中添加更多图片
如何删除幻灯片的宽度？如何在幻灯片中添加更多图片
我希望增加我的幻灯片宽度，并增加myslideshow的图片数量，幻灯片显示在java，css和html中。 我的照片尺寸是1200x300。 我试图在CSS中添加宽度，但宽度增加恰好在右侧，我的pic不适合中心请帮助我专家。 帮助帮助 帮助帮助 帮助帮助
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
display: none
}
/* Slideshow container */
.slideshow-container {
max-width: 1200px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://4.bp.blogspot.com/-LMLb-SRggk8/WdfQDgzmHYI/AAAAAAAAByc/UWQgh2DqSdAY5esr3-i5qmRYDFVuTh7zACLcBGAs/s1600/Flag%2B1200x300.jpg" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://3.bp.blogspot.com/-lbgXjiKwfss/WdfQufxdrsI/AAAAAAAAByk/A8oJ9b3nMugIs6LIgjv04qCHAfrO-NXrACLcBGAs/s1600/Animation%2BLight%2BHouse.gif" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://1.bp.blogspot.com/-6RWJYpjHqFE/WdfQ8S9RWrI/AAAAAAAAByo/OflSPE6aAKQpvWjfNUS3-lrddygVFaL6QCLcBGAs/s1600/outer%2Bspace%2Bnight%2Bstars.jpg" style="width:100%">
<div class="text"></div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
2 个答案:
答案 0 :(得分：1)
只需移除正文中的边距，然后将min-width: 100%;添加到.slideshow-container。
要添加更多幻灯片，请复制此代码。
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="my-image.jpg"> <!-- remove the width property from all image tag. -->
<div class="text"></div>
</div>
没有神奇的宽度属性可以将图像宽度设置为100％，您需要设置图像容器的宽度，图像将相应地扩展。
此外，在增加幻灯片时增加<span class="dot"></span>元素的数量。因为它取决于其他幻灯片的数量，它将停止js代码并抛出错误。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0px;
}
.widget {
margin: 0px;
}
.mySlides {
display: none
}
/* Slideshow container */
.slideshow-container {
min-width: 100%;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://4.bp.blogspot.com/-LMLb-SRggk8/WdfQDgzmHYI/AAAAAAAAByc/UWQgh2DqSdAY5esr3-i5qmRYDFVuTh7zACLcBGAs/s1600/Flag%2B1200x300.jpg" style="width: 100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://3.bp.blogspot.com/-lbgXjiKwfss/WdfQufxdrsI/AAAAAAAAByk/A8oJ9b3nMugIs6LIgjv04qCHAfrO-NXrACLcBGAs/s1600/Animation%2BLight%2BHouse.gif" style="width: 100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://1.bp.blogspot.com/-6RWJYpjHqFE/WdfQ8S9RWrI/AAAAAAAAByo/OflSPE6aAKQpvWjfNUS3-lrddygVFaL6QCLcBGAs/s1600/outer%2Bspace%2Bnight%2Bstars.jpg" style="width: 100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="http://lorempixel.com/output/food-q-c-1200-300-3.jpg" style="width: 100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="http://lorempixel.com/output/animals-q-c-1200-300-5.jpg" style="width: 100%">
<div class="text"></div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<!-- Increase the dots as you increase the slides -->
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
答案 1 :(得分：0)
这是你想要的吗？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://4.bp.blogspot.com/-LMLb-SRggk8/WdfQDgzmHYI/AAAAAAAAByc/UWQgh2DqSdAY5esr3-i5qmRYDFVuTh7zACLcBGAs/s1600/Flag%2B1200x300.jpg" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://3.bp.blogspot.com/-lbgXjiKwfss/WdfQufxdrsI/AAAAAAAAByk/A8oJ9b3nMugIs6LIgjv04qCHAfrO-NXrACLcBGAs/s1600/Animation%2BLight%2BHouse.gif" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://1.bp.blogspot.com/-6RWJYpjHqFE/WdfQ8S9RWrI/AAAAAAAAByo/OflSPE6aAKQpvWjfNUS3-lrddygVFaL6QCLcBGAs/s1600/outer%2Bspace%2Bnight%2Bstars.jpg" style="width:100%">
<div class="text"></div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？