一个自定义的卡片滑动及展示前端代码记录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<style>
.warranty {width:  100%;height: 1000px;text-align: center;vertical-align: middle;overflow: hidden;position: relative;}
.img-shadow {box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.2)}
.warranty-cover img {filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.2));}
.warranty-cover {display: block;max-width: 600px;max-height: 600px;position: absolute;top: 0;left: 0;right: 500px;bottom: 0;margin: auto;z-index: 99;}
.warranty-page1 {display: block;max-width: 550px;max-height: 550px;position: absolute;top: 0;left: 0;right: 350px;bottom: 0;margin: auto;z-index: 98; transform: translateX(150px);}
.warranty-page2 {display: block;max-width: 550px;max-height: 550px;position: absolute;top: 0;left: 0;right: 200px;bottom: 0;margin: auto;z-index: 97; transform: translateX(300px);}
.warranty-page1, .warranty-page2 {transition: transform 0.3s ease-in-out;}
.warranty-page1:hover {transform: translateX(300px); }
.warranty-page2:hover {transform: translateX(450px);}

.modal {display: none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0, 0, 0, 0.2);}
.modal-content {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 80%;background: #fff;padding: 20px;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);z-index: 1001;}
.close {position: absolute;top: 5px; right: 10px;font-size: 30px;font-weight: bold;color: #000; cursor: pointer;z-index: 1001;}
.slideshow-container {position: relative;max-width: 100%;margin: auto;}
.mySlides {display: none;}
.prev, .next {cursor: pointer;position: absolute;top: 50%;width: auto;padding: 16px;margin-top: -22px;color: #2E3D30;font-weight: bold;font-size: 18px;transition: 0.6s ease;border-radius: 0 3px 3px 0;user-select: none;}
.next {right: 0;border-radius: 3px 0 0 3px;}
.prev:hover, .next:hover {background-color: rgba(0,0,0,0.3);color: #2E3D30;}

</style>

<div class="uk-container uk-container-expand" style="padding: 0;">
    <div class="uk-margin-small-top warranty" style="background-color: #fff">
        <div class="warranty-cover">
            <img  src="...cover.png" />
        </div>
        <div class="warranty-page1">
            <img class="...page1.png" />
        </div>
        <div class="warranty-page2">
            <img class="...page2.png" />
        </div>
    </div>
</div>

<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div class="slideshow-container">
        <div class="slides">
          <div class="mySlides">
            <img src="" style="width:100%">
          </div>
        </div>
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
  </div>
</div>

<script>
var page1 = document.querySelector('.warranty-page1 img');
var page2 = document.querySelector('.warranty-page2 img');
var modal = document.getElementById('modal');
var closeBtn = document.querySelector('.modal .close');

var page1Images = [
  "...warranty-02.png",
  "...warranty-03.png"
];

var page2Images = [
  "...warranty-04.png",
  "...warranty-05.png"
];

page1.onclick = function() {
  populateSlides(page1Images);
  modal.style.display = 'block';
};

page2.onclick = function() {
  populateSlides(page2Images);
  modal.style.display = 'block';
};

closeBtn.onclick = function() {
  modal.style.display = 'none';
};

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = 'none';
  }
};

var slideIndex = 1;

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  if (n > slides.length) { slideIndex = 1; }
  if (n < 1) { slideIndex = slides.length; }
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "block";  
}

function populateSlides(imageArray) {
  var slidesContainer = document.querySelector('.slideshow-container .slides');
  slidesContainer.innerHTML = '';
  imageArray.forEach(function(src) {
    var slide = document.createElement('div');
    slide.className = 'mySlides';
    var img = document.createElement('img');
    img.src = src;
    img.style.width = "100%";
    slide.appendChild(img);
    slidesContainer.appendChild(slide);
  });
  showSlides(slideIndex = 1);
}
</script>

用到了UIkit框架，项目里还有fontawesome的内容，直接cdn引用了。效果还不错。

保密就不贴图了QvQ