From b27173f1e76f0e2a2bfa700a5ea53a96b33f5cf5 Mon Sep 17 00:00:00 2001
From: p6pqowu53 <3038288332@qq.com>
Date: Sat, 19 Oct 2024 10:15:43 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ImageChange.html | 239 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 239 insertions(+)
 create mode 100644 ImageChange.html
diff --git a/ImageChange.html b/ImageChange.html
new file mode 100644
index 0000000..f58d936
--- /dev/null
+++ b/ImageChange.html
@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .main-box {
+            margin: 0;
+            padding: 0;
+            width: 590px;
+
+
+        }
+
+        .pic {
+
+            height: 300px;
+            float: left;
+
+        }
+
+        .pic img {
+            border: none;
+            border-radius: 5%;
+            width: 500px;
+            height: 300px;
+            position: absolute;
+            z-index: -100;
+
+        }
+
+
+
+        button {
+            width: 50px;
+            height: 100px;
+            font-size: 50px;
+            line-height: 35px;
+
+
+        }
+
+        .backbtn {
+            position: relative;
+            top: 100px;
+            left: 10px;
+            background-color: rgba(255, 255, 255, 0);
+            border: none;
+            float: left;
+
+        }
+
+        .nextbtn {
+            position: relative;
+            float: right;
+            top: 35px;
+
+            background-color: rgba(255, 255, 255, 0);
+            border: none;
+
+
+        }
+
+        .footer {
+            width: 500px;
+            height: 30px;
+
+
+            position: relative;
+            top: 300px;
+            left: -50px;
+            display: inline-block;
+            list-style-type: circle;
+
+        }
+
+        .footer li {
+
+            width: 10px;
+            height: 10px;
+            float: left;
+            cursor: pointer;
+        }
+
+        .footer li.active {
+            list-style-type: disc;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="main-box">
+        <button class="backbtn">
+            < </button>
+                <div class="pic">
+                    <img src="" title="">
+                </div>
+                <ul class="footer">
+
+                    <script>
+                        let imgarr = [
+                            { src: 'image/1rd.png' },
+                            { src: 'image/2rd.jpg' },
+                            { src: 'image/3rd.jpg' },
+                            { src: 'image/4rd.jpg' }
+                        ]
+                        const footer = document.querySelector('.footer')
+                        
+                        for (let x = 0; x < imgarr.length; x++) {
+                            document.write(`<li></li>`)
+                        const li =document.querySelector(`.footer li:nth-child(${x+2})`)
+                        li.addEventListener('click',function (){img.src = imgs[x].src})
+                        }
+                        
+                    </script>
+
+                </ul>
+                <button class="nextbtn">></button>
+    </div>
+    <script>
+
+        let imgs = [
+            { src: 'image/1rd.png' },
+            { src: 'image/2rd.jpg' },
+            { src: 'image/3rd.jpg' },
+            { src: 'image/4rd.jpg' }
+        ]
+        
+        const img = document.querySelector('img')
+        const nextbtn = document.querySelector('.nextbtn')
+        const body = document.querySelector('body')
+        const backbtn = document.querySelector('.backbtn')
+        let i = 0
+            x=i
+        function nextimg() {
+
+            console.log(i)
+
+
+
+            if (i < (imgs.length - 1)) {
+                i++
+                const li = document.querySelector(`.footer li:nth-child(${i + 2})`)
+                li.classList.toggle('active')
+                let li3 = document.querySelector(`.footer li:nth-child(${i + 1})`)
+                    .classList.remove('active')
+            }
+
+            else {
+                i = 0
+                const li4 = document.querySelector(`.footer li:nth-child(${imgs.length + 1})`)
+                li4.classList.remove('active')
+                const li5 = document.querySelector(`.footer li:nth-child(${2})`)
+                li5.classList.add('active')
+
+
+            }
+            //const li = document.querySelector(`.footer li:nth-child(${i+2})`)
+            //li.classList.toggle('active')
+            img.src = imgs[i].src
+
+
+            //let li3 = document.querySelector(`.footer li:nth-child(${i+1})`)
+            //.classList.remove('active')
+
+        }
+
+
+        function backimg() {
+
+
+            if (i > 0) {
+                i--
+                console.log(i)
+                const li = document.querySelector(`.footer li:nth-child(${i + 2})`)
+                li.classList.toggle('active')
+                let li3 = document.querySelector(`.footer li:nth-child(${i + 3})`)
+                li3.classList.remove('active')
+            }
+            else {
+                i = imgs.length - 1
+                const li4 = document.querySelector(`.footer li:nth-child(${imgs.length + 1})`)
+                li4.classList.add('active')
+                const li5 = document.querySelector(`.footer li:nth-child(${2})`)
+                li5.classList.remove('active')
+
+            }
+            img.src = imgs[i].src
+            console.log(i)
+
+
+
+        }
+        let n = setInterval(nextimg, 1000)
+        function stop(){
+            clearInterval(n)
+        }
+        function cont(){
+            n =setInterval(nextimg,1000)
+        }
+        function switchColor() {
+            nextbtn.style.background = 'rgba(255, 255, 255, 0.5)'
+            clearInterval(n)
+        }
+        function switchColor2() {
+            backbtn.style.background = 'rgba(255, 255, 255, 0.5)'
+            clearInterval(n)
+        }
+        function backColor() {
+            nextbtn.style.background = ''
+            n = setInterval(nextimg, 1000)
+        }
+        function backColor2() {
+            backbtn.style.background = ''
+            n = setInterval(nextimg, 1000)
+        }
+        nextbtn.addEventListener('click', nextimg)
+        nextbtn.addEventListener('mouseenter', switchColor)
+        nextbtn.addEventListener('mouseout', backColor)
+        backbtn.addEventListener('click', backimg)
+        backbtn.addEventListener('mouseenter', switchColor2)
+        backbtn.addEventListener('mouseout', backColor2)
+        img.addEventListener('mouseover',stop)
+        img.addEventListener('mouseout',cont)
+
+        body.onload = function () {
+            img.src = imgs[0].src
+            const li2 = document.querySelector(`.footer li:nth-child(${2})`)
+            li2.classList.add('active')
+        }
+
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
