|
|
@@ -0,0 +1,136 @@
|
|
|
+<!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>
|
|
|
+ /* css reset */
|
|
|
+ body{
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ li{
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
+ ul{
|
|
|
+ padding: 0;
|
|
|
+ margin:0;
|
|
|
+ }
|
|
|
+ .clearfix::after{
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .swiper-content{
|
|
|
+ width: 600px;
|
|
|
+ border:1px solid black;
|
|
|
+ margin: 200px auto;
|
|
|
+ }
|
|
|
+ .swiper-content .big-img{
|
|
|
+ border-bottom: 1px solid black;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .swiper-content .big-img img{
|
|
|
+ width: 300px;
|
|
|
+ }
|
|
|
+ .swiper-content .small-img li{
|
|
|
+ float: left;
|
|
|
+ width: 149px;
|
|
|
+ text-align: center;
|
|
|
+ border-right: 1px solid black;
|
|
|
+ }
|
|
|
+ .swiper-content .small-img li:last-child{
|
|
|
+ border:0;
|
|
|
+ }
|
|
|
+ .swiper-content .small-img img{
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="swiper-content">
|
|
|
+ <div class="big-img">
|
|
|
+ <img class="top-img" src="./image/img1.png" alt="img">
|
|
|
+ </div>
|
|
|
+ <div class="small-img">
|
|
|
+ <ul class="clearfix">
|
|
|
+ <li>
|
|
|
+ <img class="bottom-img" src="./image/img1.png" alt="img">
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img class="bottom-img" src="./image/img2.png" alt="img">
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img class="bottom-img" src="./image/img3.png" alt="img">
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img class="bottom-img" src="./image/img4.png" alt="img">
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ var bigImg = document.getElementsByClassName("top-img")[0];
|
|
|
+ var smallImg1 = document.getElementsByClassName("bottom-img")[0];
|
|
|
+ var smallImg2 = document.getElementsByClassName("bottom-img")[1];
|
|
|
+ var smallImg3 = document.getElementsByClassName("bottom-img")[2];
|
|
|
+ var smallImg4 = document.getElementsByClassName("bottom-img")[3];
|
|
|
+ var smallImg = document.getElementsByClassName("bottom-img");
|
|
|
+ // console.log(smallImg,smallImg.length)
|
|
|
+
|
|
|
+ // var arr = [1,2,3,4,5,6,7];
|
|
|
+ // console.log(arr[0]);
|
|
|
+ // console.log(arr[1]);
|
|
|
+ // console.log(arr[2]);
|
|
|
+ // console.log(arr[3]);
|
|
|
+ // console.log(arr[4]);
|
|
|
+ // console.log(arr[5]);
|
|
|
+ // for(var i=0;i<arr.length;i++){
|
|
|
+ // console.log(arr[i]);
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ // 方法二
|
|
|
+ for(var i=0;i<smallImg.length;i++){
|
|
|
+ smallImg[i].index = i;
|
|
|
+ smallImg[i].onmouseover = function(){
|
|
|
+ // console.log(smallImg[i]);
|
|
|
+ // console.log(i);
|
|
|
+ console.log(this.index);
|
|
|
+ // bigImg.setAttribute("src",smallImg[i].getAttribute("src"));
|
|
|
+ bigImg.setAttribute("src",this.getAttribute("src"));
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 方法一
|
|
|
+ // smallImg1.onmouseover = function(){
|
|
|
+ // // bigImg.src = smallImg1.src;
|
|
|
+ // // bigImg.setAttribute("src",smallImg1.getAttribute("src"));
|
|
|
+ // bigImg.setAttribute("src",this.getAttribute("src"));
|
|
|
+ // }
|
|
|
+ // smallImg2.onmouseover = function(){
|
|
|
+ // // bigImg.src = smallImg2.src;
|
|
|
+ // bigImg.setAttribute("src",this.getAttribute("src"));
|
|
|
+ // }
|
|
|
+ // smallImg3.onmouseover = function(){
|
|
|
+ // bigImg.setAttribute("src",this.getAttribute("src"));
|
|
|
+ // }
|
|
|
+ // smallImg4.onmouseover = function(){
|
|
|
+ // bigImg.setAttribute("src",this.getAttribute("src"));
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ // var obj = {
|
|
|
+ // name:"张三"
|
|
|
+ // }
|
|
|
+ // obj.age = 18;
|
|
|
+ // obj.tal = function(){
|
|
|
+
|
|
|
+ // }
|
|
|
+ // console.log(obj);
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
