因此，当我有html和css代码下面的html index.html假设有幻灯片显示的Web浏览器是否每个图片显示旁边的垂直当我击中下一个箭头，它成为一个幻灯片，它不显示图片旁边的其他了。
html {
background: url('./images/cover2.jpg') no-repeat center fixed;
background-size: cover;
}
body{
font-family: 'Source Sans Pro', sans-serif;
color: white;
margin-top: 130px;
margin-left: 0px;
height: 125vh;
padding: 1px;
}
.ImgNavagation{
height: 90px;
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: white;
opacity: 0.92;
max-width: 100%;
align-items: center;
display: flex;
}
h1{
font-weight: bolder;
font-size: 50px;
color: black;
max-width: 100%;
}
.navigation {
display: flex;
justify-content: space-evenly;
list-style: none;
max-width: 100%;
}
.location-cont1{
margin: 10px;
float: left;
}
.location-cont2{
margin: 10px;
float: left;
}
li{
list-style-type: none;
}
.ImgNavagation *{
display:inline;
margin: 5px;
}
.slideshow-container {
position: relative;
max-width: 1000px;
margin: auto;
}
.myslides{
display: none;
}
.prev, .next{
cursor: pointer;
position:absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover{
background-color: rgba(0,0,0,0,0.34);
}
.dot{
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover{
background-color: #717171;
}
.fade{
animation-name: fade;
animation-duration: 1.0s;
}
@keyframes fade{
from {opacity: .4}
to {opacity: 1}
}
.mission_content{
margin: 1px 0px 1px 0px;
border: 1.5px solid white;
max-width: 895px;
}
#About{
margin: 1px 0px 1px 0px;
border: 1.5px solid white;
max-width: 895px;
}
#Contact{
background-color: #282424;
overflow: hidden;
position: relative;
bottom: 0;
left: 0;
width: 100%;
}
#Contact a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: underline;
font-size: 17px;
}
#Contact a:hover{
background-color: #E91E63;
border-radius : 20%;
color: white;
}
#ontact a:active{
background-color: #E91E63;
border-radius : 20%;
color: white;
}<!--<body>-->
<div class = "ImgNavagation">
<img src="./images/bookicon.png" width="80" height="40" >
<h1>Singh Books & Co.</h1>
<ul class="navigation">
<li class=" navigation nav-success"><a href="#About">About</a></li>
<li class=" navigation nav-success"><a href="#location">Location</a></li>
<li class=" navigation nav-success"><a href="#Contact">ContactUS</a></li>
</ul>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="./images/insidelook1.jpg" style="width: 100%">
</div>
<div class="mySlides fade">
<img src="./images/insidelook2.jpg" style="width: 100%">
</div>
<div class="mySlides fade">
<img src="./images/insidelook3.jpg" style="width: 100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<h2>Mission</h2>
<div class = "mission_content">
<p>Our mission is Singh book is provide every book, meet customer demand and supply and
serve a best customer service. Also we buy book from buyer they want to sell.
</p>
</div>
<h2>About Us</h2>
<div id="About">
<p>Singh Book & Co. is owned by Harry Singh since 1990.
Singh Book & Co have multiple location around Ohio, Michgan and ship nationwide USA.
Stores are Open until 8am - 6pm and 24/7 for nationwide order.
Singh Book & Co. Carry every genere type of books Fiction, Non-fiction, Memiors...etc.
Also have different format of book hardcover or paperback.
</p>
</div>
<div id="location">
<h2>Location:</h2>
<div class="location-cont1">
<h4>Ohio:</h4>
<ul>
<li>Toledo</li>
<li>Cleveland</li>
<li>Dayton</li>
<li>Cinncanti</li>
<li>Colmubus</li>
<li>Sandusky</li>
</ul>
</div>
<div class="location-cont2">
<h4>Michgan:</h4>
<ul>
<li>Grand Rapid</li>
<li>Detroit</li>
<li>Farmightion Hill</li>
<li>Novi</li>
<li>Travese City</li>
</ul>
</div>
</div>
<div id="Contact">
<h3>Support Service:</h3>
<a>Email Address: SinghbookCo@gmail.com</a>
<a>Phone Number: 3214892034</a>
</div>
<!-- </body>
</html>-->let slideIndex =1;
showSlides(slideIndex);
function plusSlides(n){
showSlides(slideIndex += n);
}
function currentSlide(n){
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName('mySlides');
let dots = document.getElementsByClassName('dot');
if(n > slides.length){
slideIndex = 1;
}
if(n < 1){
slideIndex = 1
}
for(i=0; i< slides.length; i++){
slides[i].style.display = "none";
}
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";
}我累了玩幻灯片容器css类标签，但它没有属性将修复这个错误的网站。不知道该怎么做，任何帮助都将不胜感激。我开始我的旅程在html和css作为初学者，但想得到别人的意见，我不想尝试。
1条答案
按热度按时间kqhtkvqz1#
如前所述，快速浏览一下，您正在调用没有定义的事件。在这些行中：
&
“onClick”属性被设置为JavaScript函数，一个是currentSlide（x），另一个是plusSlides（y），其中x和y是传递给它们的参数。
'onClick'属性是一个事件，当你点击相应的元素时，它基本上会执行你在其中写入的任何内容，并且当你点击某个东西时，使用JavaScript函数可以交互地对HTML执行操作是非常常见的。在您的案例中：更改幻灯片中的图片。函数可以在另一个.js文件中定义，只有脚本，然后你必须作为一个外部文件加载，就像你希望为css所做的那样（* 你的HTML部分丢失了，所以很难说 *）。或者你可以直接在index.html中使用一个标签。
如果您有相应的JS，请添加到您的问题中，我们可以给予进一步的帮助。