html简易幻灯片,web从零单排，做一个简单的幻灯片

我的First Blood。

学习javascript越来越吃力，以前需要实现什么功能，各种插件上，照着例子，直接复制粘贴，也不知道啥原理，现在后悔了，人总要为自己做过的一切买单，这么做是好事也是坏事，废话不多说，自己体会哈！

第一步 HTML

❮

❯

心路历程

先搞个盒子，把这些幻灯片的图片装起来，还要有左右滑动箭头，还有啥，就是切换的点点

接下来要搞样式了，想想我们一般刚打开一个幻灯片是什么样子，先写出来样式

第二布 写CSS

div,

body {

margin: 0;

padding: 0

}

div,

span {

box-sizing: border-box;

}

.main {

margin: 0 auto;

width: 70%;

margin-top: 30px;

}

.slide {

display: none;

}

.slideshow-container {

width: 100%;

height: 750;

overflow: hidden;

position: relative;

}

.slideshow-container img {

width: 100%;

height: 100%

}

.dot {

display: inline-block;

width: 16px;

height: 16px;

border-radius: 50%;

background: #000;

cursor: pointer;

}

.dot:hover {

background: #696767;

}

.dot.active {

background: #fff;

border: 1px solid #000;

}

.prev {

color: #fff;

position: absolute;

top: calc(50% - 35px);

display: block;

padding: 20px;

cursor: pointer;

transition: all .3s;

left: 0;

font-size: 25px;

}

.prev:hover {

background: rgba(0, 0, 0, 0.5)

}

.next {

color: #fff;

position: absolute;

top: calc(50% - 35px);

right: 0;

display: block;

padding: 20px;

cursor: pointer;

transition: all .3s;

font-size: 25px;

}

.next:hover {

background: rgba(0, 0, 0, 0.5);

}

.fadeIn {

animation: myFadeIn 1.5s;

-webkit-animation: myFadeIn 1.5s;

}

@keyframes myFadeIn {

from {

opacity: 0.5;

}

to {

background: 1;

}

}

@-webkit-keyframes myFadeIn {

from {

opacity: 0.5;

}

to {

background: 1;

}

}

心路历程

表示首先要清除样式，然后开始。细说不来啊，中间加了个fadeIn过度下，显得不那么尴尬，那两个箭头用了绝对定位，垂直居中的一种top(calc)方法

第三步 写JS

var slideIndex = 1;

var slides = document.getElementsByClassName("slide");

var dots = document.getElementsByClassName("dot");

goSlide(1);

function prevSlide() {

goSlide(slideIndex - 1);

}

function nextSlide() {

goSlide(slideIndex + 1);

}

//switch to some slide

function goSlide(n) {

//考虑头尾

n = n == 0 ? slides.length : n;

n = n == (slides.length + 1) ? 1 : n;

//main

for (let i = 0; i < slides.length; i++) {

if (i == n - 1) {

slides[i].style.display = "block";

} else {

slides[i].style.display = "none";

}

}

for (let j = 0; j < dots.length; j++) {

if (j == n - 1) {

dots[j].className += dots[j].className.indexOf(" active") > 0 ? "" : " active";

} else {

dots[j].className = dots[j].className.replace(" active", "");

}

}

//赋值给index

slideIndex = n;

}

心路历程

首先我得解决，我想到哪一页就到哪一页，那我得知道当前页的页码slideIndex,所以我得先定义一下，初始为1，然后就可以写一个方法goSlide(n)去到哪一页的实现，接下来再考虑怎么去切换前一张和后一张，只要知道slideIndex那这个就很简单了，所以最后别忘了赋新的值给slideIndex

一个半调子程序员，基础很不扎实，第一次强迫自己写写文章，虽然很简单，相信自己跟着需求、逻辑走再难的路也能走通