使用HTML和CSS创建简单的图片幻灯片

在本文中，我们将介绍使用HTML和CSS创建简单的图片幻灯片的方法。如果你是初学者，这篇文章会对你有所帮助。


HTML结构

首先，我们需要设置HTML结构。在这个例子中，我们使用了一个包含三张图片的div。HTML如下：

1
2
3
4
5
6
7
8
9
10
11
<div class="slideshow-container">
  <div class="mySlides fade">
    <img src="img1.jpg">
  </div>
  <div class="mySlides fade">
    <img src="img2.jpg">
  </div>
  <div class="mySlides fade">
    <img src="img3.jpg">
  </div>
</div>

其中，slideshow-container类定义了一个包含幻灯片的div，而mySlides fade类定义了每个幻灯片的div。每张幻灯片都包含一个img标签，用于显示图片。


CSS样式

接下来，我们需要使用CSS样式来定义幻灯片的外观。CSS如下：

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
* {box-sizing: border-box;}
 
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
 
.mySlides {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
 
.mySlides img {
  width: 100%;
  height: auto;
}
 
.prev, .next {
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
}
 
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
 
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
 
.dot-container {
  text-align: center;
  padding: 20px;
  background: #ddd;
}
 
.dot {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.6s ease;
}
 
.active, .dot:hover {
  background-color: #717171;
}
 
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
 
@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
 
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

这些CSS样式定义了幻灯片的样式、幻灯片的前进和后退按钮样式、以及幻灯片的小圆点样式。


JavaScript代码

最后，我们需要使用JavaScript代码来控制幻灯片。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var slideIndex = 0;
showSlides();
 
function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 2000); // 每隔2秒切换幻灯片
}

此JavaScript代码用于控制幻灯片的切换，每隔两秒钟自动切换到下一张幻灯片。


现在，我们已经完成了使用HTML和CSS创建简单的图片幻灯片的教程。通过这个例子，你可以学习到如何使用HTML和CSS创建幻灯片，以及如何使用JavaScript来控制幻灯片。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

猿教程
请先登录后发表评论
  • 最新评论
  • 总共0条评论