.slideshow-container {
position: relative;
text-align:center;
margin:auto;
width: 960px;
height: 300px;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.slide.active {
opacity: 1;
}
</style>
<body>
<form id="form1" runat="server">
<div class="header">
Welcome to GZJiuying!<span class="span0">Email:<a href="mailto:gzjiuying@outlook.com">gzjiuying@outlook.com</a></span>
</div>
<div class="div0">
<img src="images/logo1.png" alt="logo" class="img_style0"/><ul class="nav_bar">
<li><a>Home page</a> </li>
<li><a>About us</a></li>
<li><a>Main products</a></li>
<li><a>Testimonials</a></li>
<li><a>Strength</a></li>
<li><a>Company news</a></li>
<li><a>Contact us</a></li>
</ul>
</div>
<div class="slideshow-container">
<div class="slide">
<img src="images/Aluminum foil tape25.jpg" width="940" height="300" alt="Image 1" />
</div>
<div class="slide">
<img src="images/bushing11.jpg" width="940" height="300" alt="Image 2" />
</div>
<div class="slide">
<img src="images/Graphtie sheet36.jpg" width="940" height="300" alt="Image 3" />
</div>
</div>
</form>
<script type="text/javascript">
const slides = document.querySelectorAll(".slide");
var currentSlide = 0;
var slideIndex=0;
function showSlide(slideIndex) {
for(var i=0;i <=slides.length;i++)
{
if(i==slideIndex)
{
slides[slideIndex].classList.add('active');
}
slides[slideIndex].classList.remove('active');
}
}
window.alert(slideIndex);
}
function nextSlide() {
showSlide(currentSlide);
currentSlide++;
if (currentSlide >= slides.length) {
currentSlide = 0;
}
}
function startSlideshow() {
setInterval(nextSlide, 3000); // 每隔3秒切换一次轮播图
}
startSlideshow();
</script>
这跟不写有啥区别
这,加上else也不对,你设置一个active,其余的都要设置为remove,对吧
@gzjiuying: 不知道你要做什么 但是你现在写的这种 等于 slideIndex=0 的时候 给 slides 第一个元素添加 active 类名 但是下面不加else 就等于 这个循环只做了 把 slides所有元素 都 remove 了active类名
这是本来的 代码:
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;
function showSlide(slideIndex) {
slides.forEach((slide) => {
slide.classList.remove('active');
});
slides[slideIndex].classList.add('active');
}
这个有问题 ?