海报切换，小圆点切换

bottom.css

@@ -0,0 +1,7 @@
+.info{
+    /* top:2rem; */
+    height:10rem;
+    width:10rem;
+    margin:0 2rem 0 2rem;
+    background-color: lightgrey;
+}

iframe.css

@@ -1,22 +1,26 @@
+#iframe-container{
+    width:100rem;
+    height:52.4rem;
+    position: relative;
+}
 .exhibition{
     position: absolute;
     border-width: 0;
     left:50%;
-    top:56rem;
+    top:0;
     -webkit-transform: translate(-50%);
         -ms-transform: translate(-50%);
             transform: translate(-50%);
     width:100%;
-    height: 63rem;
+    height: 51rem;
 }
 
 
-.backsvg{
-    width: 100rem;
-}
-
-.iframesvg{
-    height:63rem;
+.iframepng{
+    position:absolute;
+    top:0; left:0;
+    width:100%;
+    height:100%;
 }
 
 #caltural-relic-wall{
@@ -29,20 +33,6 @@
     transform: scale(1,1); */
 }
 
-.text-title{
-    position: absolute;
-    top:3rem;
-    width: 100rem;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-        -ms-flex-pack: center;
-            justify-content: center;
-    font-size: 2.5rem;
-}
 
 .img-title{
     position:absolute;
@@ -57,12 +47,21 @@
         -ms-flex-pack: center;
             justify-content: center;
 }
+.ex{
+    top:7.9rem;
+}
 
 .tradition{
-    top:119rem;
+    top:109rem;
 }
 
 
+
+
+
+
+
+
 .revolution{
     top:160rem;
 }
@@ -80,7 +79,7 @@
 
 .cards{
     position:absolute;
-    top:8rem;
+    top:17rem;
     left:0;
     width: 100%;
     height:25rem;
@@ -92,19 +91,68 @@
     -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center;
-    background-color: lightgray;
+    /* background-color: lightgray; */
 }
 
 .card{
+    overflow: hidden;
     top:0;
-    width:18rem;
-    height:25rem;
-    margin: 0 2rem 0 2rem;
-    background-color: lightblue;
+    width:18.3rem;
+    height:25.9rem;
+    margin: 0 0.41rem 0;
+    /* background-color: lightblue; */
 }
 
 .img5{
-    width: 8.5rem;
+    width: 9rem;
+}
+
+.img6{
+    width:10.2rem;
+
+}
+
+.img7{
+    width:100%;
+}
+
+.control{
+    position:absolute;
+    top:26.7rem;
+    right:12.2rem;
+}
+
+.control:hover{
+    cursor: pointer;
+}
+
+img.control{
+    width:5.6rem;
+}
+
+.index{
+    position:absolute;
+    top:44.2rem;
+    width:100%;
+    display: flex;
+    justify-content: center;
+}
+
+.index div{
+    width:6px;
+    height:6px;
+    border:solid orange 1px;
+    border-radius: 5px;
+    margin:0 2px 0;
+}
+
+.index_on{
+    width:9px;
+    background-color: orange;
+}
+
+.disappear{
+    display: none;
 }
 
 .guide{
@@ -121,10 +169,15 @@
             justify-content: space-around;
 }
 
-.info{
-    /* top:2rem; */
-    height:10rem;
-    width:10rem;
-    margin:0 2rem 0 2rem;
-    background-color: lightgrey;
+
+.poster{
+    position:relative;
+    width: 100rem;
+    height:166.1rem;
+}
+
+.posterbackground{
+    position:absolute;
+    border-width: 0;
+    width:100%;
 }

index.css

@@ -93,7 +93,7 @@ body{
 
 
 .button{
-    margin:0 0.8rem 0 0.8rem;
+    margin:0 1.5rem 0;
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -291,5 +291,6 @@ img.img3{
 }
 
 img.img4{
-    height:4.48rem;
+    width:12.3rem;
+    height:2.91rem;
 }

script/image_switch.js

@@ -0,0 +1,33 @@
+let controls = document.querySelectorAll('.exhibition');
+
+for(let control of controls){
+
+    let part = control.querySelectorAll('.cards'),
+    partLength = part.length;
+    console.log("partLength",partLength);
+    let partArray = [].slice.call(part);
+    let indexicon = control.querySelectorAll('.index div');
+    let currentIndex = 0;
+    let nextbutton = control.querySelector(".next");
+
+    control.addEventListener("click",function(e){
+        let target = e.target;
+        
+        if(target.classList.contains("next")){
+            let next = e.target,
+                currentPart = partArray[currentIndex],
+                nextPart = partArray[(currentIndex+1)%partLength],
+                currentIndexIcon = indexicon[currentIndex],
+                nextIndexIcon = indexicon[(currentIndex+1)%partLength];
+    
+    
+            currentPart.classList.add("disappear");
+            nextPart.classList.remove("disappear");
+            currentIndexIcon.classList.remove("index_on");
+            nextIndexIcon.classList.add("index_on");
+            currentIndex = (currentIndex+1)%partLength;
+            console.log("next",currentIndex);
+    
+        }
+    });
+}