JavaScript实例幻灯片（自动播放且能点击）

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>幻灯片</title><link rel="stylesheet" href="../幻灯片(自动播放 切换)/index.css"><script src="./index.js" defer="defer"></script>
</head><body><div class="slideshow-container"><div class="mySlides fade"><div class="numbertext">1 / 3</div><img src="./imgs/1.jpg" style="width:100%"><div class="text">文本 1</div></div><div class="mySlides fade"><div class="numbertext">2 / 3</div><img src="./imgs/2.jpg" style="width:100%;height:80%;"><div class="text">文本 2</div></div><div class="mySlides fade"><div class="numbertext">3 / 3</div><img src="./imgs/3.jpg" style="width:100%"><div class="text">文本 3</div></div><div class="mySlides fade"><div class="numbertext">1 / 3</div><img src="./imgs/1.jpg" style="width:100%"><div class="text">文本 1</div></div><a class="prev" onclick="plusSlides(-1)">❮</a><a class="next" onclick="plusSlides(1)">❯</a></div><br><div style="text-align:center"><span class="dot" onclick="currentSlide(1)"></span><span class="dot" onclick="currentSlide(2)"></span><span class="dot" onclick="currentSlide(3)"></span><span class="dot" onclick="currentSlide(4)"></span></div>
</body></html>

`CSS`:

这个实例是通过改变display：none来实现幻灯片的切换的
原理：设置一个幻灯片容器，将图片和点和切换按钮放到容器中

过渡动画(transition)和animation动画。

* {box-sizing: border-box
}body {font-family: Verdana, sans-serif;
}.mySlides {display: none;
}/* 幻灯片容器 */.slideshow-container {height: 600px;max-width: 1000px;position: relative;margin: auto;
}/* 下一张 & 上一张 按钮 */.prev,
.next {cursor: pointer;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;
}/* 定位 "下一张" 按钮靠右 */.next {right: 0;border-radius: 3px 0 0 3px;
}/* On hover, add a black background color with a little bit see-through */.prev:hover,
.next:hover {background-color: rgba(0, 0, 0, 0.8);
}/* 标题文本 */.text {color: #f2f2f2;font-size: 15px;padding: 8px 12px;position: absolute;bottom: 8px;width: 100%;text-align: center;
}/* 数字文本 (1/3 等) */.numbertext {color: #f2f2f2;font-size: 12px;padding: 8px 12px;position: absolute;top: 0;
}/* 标记符号 */.dot {cursor: pointer;height: 13px;width: 13px;margin: 0 2px;background-color: #bbb;border-radius: 50%;display: inline-block;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}
}

JS部分：
需要考虑的是settimeout的关闭与打开
每次点击向右移或左移都要关闭settimeout

var slideIndex = 0;
var out = 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";}if (slideIndex > slides.length - 1) { slideIndex = 0 }if (slideIndex < 0) {slideIndex = slides.length - 1}for (i = 0; i < dots.length; i++) {dots[i].className = dots[i].className.replace(" active", "");}slides[slideIndex].style.display = "block";dots[slideIndex].className += " active";timeout = setTimeout(showSlides, 2000); // 切换时间为 2 秒slideIndex++;return timeout;
}//点击function plusSlides(n) {clearTimeout(timeout)slideIndex = slideIndex + n - 1;showSlides();
}function currentSlide(n) {clearTimeout(timeout)slideIndex = nshowSlides();
}

JavaScript实例幻灯片（自动播放且能点击）相关推荐

javascript实现时钟实时显示及幻灯片自动播放
动态时钟的实现--实时显示时间 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type ...
speedoffice（PPT）怎么设置幻灯片自动播放切换时间
PPT怎么设置幻灯片自动播放切换时间呢?看看小编是怎么操作的吧首先,用speedoffice打开需要设置幻灯片自动播放切换时间的PPT文件然后,点击右侧工具栏"幻灯片",将幻灯 ...
office 2010 ppt幻灯片自动播放
方法一: 在菜单栏中找到"幻灯片放映"-->"排练计时" 这时幻灯片开始放映,鼠标点击使幻灯片一步一步播放至结束! 会出来一个窗口选择"是&qu ...
如何使用JS实现图片幻灯片自动播放
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
web前端运用CSS动画实现图像的幻灯片自动播放切换效果
先看一下浏览器运行结果: 一. 最初用"background-image"背景图片属性定义动画,结果幻灯片切换时没有上下滑动的效果. 仅用到HTML和CSS,未用javascrip ...
如何设置幻灯片自动播放
转载者: ppt背景来源: http://www.2ppt.cn pdf转ppt 来源: www.2ppt.cn 在PowerPoint制作演示文稿时,我们可以将一些图片设置 ...
幻灯片自动播放的实现
转载者: 酒店服务礼仪ppt课件来源: www.2ppt.cn 说起列表播放,我们一般都是应用在音视频文件之中.而PPT是日常生活中使用最普遍的文档演示工具,有时同样需要让 ...
幻灯片轮播图（含自动播放和手动点击播放，代码易懂）
HTML代码: <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
PPT 如何取消幻灯片自动播放
幻灯片放映--设置放映方式--换片方式--手动--确定~ 完成~
微信android自动播放视频文件,vue-player或TcPlayer在微信内自动播放video和audio
不管是IOS框互理.各近架跳机蓝种近架跳机蓝种近架跳和Android,当video和audio初始src为空,根据点击不同的媒体源(非播放器控件),比如多个章节的视频列表,动态给src赋值并执行pla ...

JavaScript实例幻灯片（自动播放且能点击）

`CSS`:

过渡动画(transition)和animation动画。

JavaScript实例幻灯片（自动播放且能点击）相关推荐

最新文章

热门文章

JavaScript实例 幻灯片（自动播放 且 能点击）

CSS:

过渡动画(transition)和animation动画。

JavaScript实例 幻灯片（自动播放 且 能点击）相关推荐

最新文章

热门文章

JavaScript实例幻灯片（自动播放且能点击）

`CSS`:

JavaScript实例幻灯片（自动播放且能点击）相关推荐