修改这段代码,实现图片点击切换效果@charset "utf-8";* { margin: 0; padding: 0; list-style: none; }html { height: 100%;}body { width: 100%; height: 100%; margin: 0; display: flex; flex-direction: column;}.class1 { height: 70px; width: 100%; background: #ccc; }.class2 { height: 50px; width: 100%; background: #ffaa00;}.class3 { width: 100%; }header{ background-color: #00ffff; height: 70px; width: 1200px; margin: 0 auto; }.logo{ width: 200px; height: 65px; background-color: #16A1E7; float: left; padding-top: 5px; } .logo.p{ line-height: 10px; } .search{ width: 800px; height: 70px; float: left; } /* 搜索框在导航中居中 */ header .search form{ margin-left: 150px; margin-top: 20px; } /* 输入框样式 */ header .search input{ height:36px; border:none; float:left; } header .search input[type=text]{ width:300px; border:0.5px solid #999; padding:0px 5px; } /* 输入框 */ header .search input[type=submit]{ background-color:#16A1E7; color:#fff; width:100px; font-size:14px; font-family:"微软雅黑";} .reg{ width: 200px; height: 70px; background-color: #ffaa7f; float: left; } .reg a{ text-decoration: none; } .delu{ margin: 25px 0px 0px 120px; } .nav{ width: 100%; height: 50px; border-bottom: 2px solid #0099CC; display: flex; } ul{ background-color: #ffffff; list-style-type: none; overflow: hidden; width: 1200px; margin: 0 auto; } li{ /*display与float两种方式使列表转为横向*/ /* display: inline; */ float: left; } li a{ display:block ; color: #000000; text-decoration: none; text-align: center; padding: 14px 46px; font-size: 16px; } li a:hover{ background-color:#000000 ; color: #ffffff; } .active{ background-color: #00aaff; } .sildeshow > *{ position: absolute; } .href{ z-index: 100; margin-top: 470px; } .href a{ display: block; width: 80px; height: 30px; background-color: #333; float: left; margin-left: 25px; } .images > li img{ width: 500px; height: 500px; }
时间: 2024-01-01 17:04:46 浏览: 87
这里提供一个简单的实现图片点击切换效果的方法:
1. 给每张图片绑定一个点击事件,当点击事件触发时,切换到下一张图片。
2. 在 HTML 中添加一个 `<ul>` 元素,每个 `<li>` 元素内包含一张图片,给 `<ul>` 元素添加一个 class 名为 `images`。
3. 在 CSS 中给 `images` 类设置 `position: relative;`,并给每个 `<li>` 元素设置 `position: absolute;`,以便于实现图片的重叠和切换。
4. 在 CSS 中给 `<li>` 元素设置 `opacity: 0;`,即使图片不可见。
5. 在 JavaScript 中实现点击事件,当点击事件触发时,将当前图片的 `opacity` 设置为 0,将下一张图片的 `opacity` 设置为 1。
实现代码如下:
HTML:
```
<ul class="images">
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
</ul>
```
CSS:
```
.images {
position: relative;
}
.images > li {
position: absolute;
opacity: 0;
}
.images > li:first-child {
opacity: 1;
}
.images > li img {
width: 500px;
height: 500px;
}
```
JavaScript:
```
var currentImage = 0;
var images = document.querySelectorAll('.images > li');
setInterval(function() {
images[currentImage].style.opacity = 0;
currentImage++;
if (currentImage >= images.length) {
currentImage = 0;
}
images[currentImage].style.opacity = 1;
}, 5000);
```
这段代码会每隔 5 秒切换到下一张图片。当然,你可以修改切换的时间间隔和图片的数量。
阅读全文