这是全部的代码，运行后很久才出现图片，不知什么原因
0
[已解决问题]
解决于 2025-08-23 11:06
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>GZJiuying</title>
</head>
<style type="text/css">
.header
{
width:960px;
heigtht:19px;
text-align:left;
margin:auto;
background-color:Transparent;
}
.span0
{
margin-left:480px;
}
.div0
{
text-align:left;
margin:auto;
width:960px;
heigtht:19px;
}
.img_style0
{
height: 57px;
width: 152px;
}
.nav_bar
{
list-style-type:none;
font-size:16px;
width: 750px;
margin-top:-35px;
margin-left:170px;
padding:0;
}
.ul_style0
{
list-style-type:none;
font-size:16px;
text-align:center;
margin:auto;
}
.nav_bar li
{
display:inline;
margin-right:15px;
}
.nav_bar li:last-child
{
margin-right:0;
}
.container
{
width:960px;
text-align:center;
margin:auto;
height:280px;
position:relative;
text-align:center;
}
.nav_bar li a:hover
{
text-decoration:underline;
background-color:Aqua;
}
.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');
let currentSlide = 0;
function showSlide(slideIndex) {
slides.forEach((slide) => {
slide.classList.remove('active');
});
slides[slideIndex].classList.add('active');
currentSlide++;
}
function nextSlide() {
if (currentSlide >= slides.length) {
currentSlide = 0;
}
showSlide(currentSlide);
}
function startSlideshow() {
setInterval(nextSlide, 3000); // 每隔3秒切换一次轮播图
}
startSlideshow();
</script>
</body>
</html>
最佳答案
0
<script> const slides = document.querySelectorAll('.slide');
let currentSlide = 0;
function showSlide(index) {
slides.forEach((slide, i) => {
slide.classList.remove('active');
if (i === index) {
slide.classList.add('active');
}
});
}
function nextSlide() {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
}
setInterval(nextSlide, 3000);
showSlide(currentSlide);
</script> 换成这个
奖励园豆：5
上面css 里面 height 有的写错了
@摸鱼w: 哪里？
太感谢了！
