Javascript幻灯片播放功能实现过程解析


Posted in Javascript onMay 07, 2020

javascript实现幻灯片播放

实现原理

  • step1 设置容器,包含图片、翻页、下标等元素,通过相对定位来布局。
  • step2 将幻灯片变化,需要改变的元素放在一个字容器内,display设为none,并且采取动画来变化。
  • step3设置js函数,将应该播放的元素样式激活,其他的元素仍为未激活状态或者不展示类的隐藏。

代码

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入css样式 -->
<link rel="stylesheet" href="style.css" rel="external nofollow" type="text/css">

</head>
<body>
	<!-- 先设置轮播的整体容器 -->
	<div class="slideshow-container">
		<!-- 在设置轮播图片、翻页键、数字文本的容器 -->
		<!-- fade为滑动动画特效 -->
		<div class="mySlides fade">
			<div class="numbertext">1 / 3</div>
			<img src="img/1.jpg" style="width: 100%">
			<div class="text">文本 1</div>
		</div>

		<div class="mySlides fade">
			<div class="numbertext">2 / 3</div>
			<img src="img/2.jpg" style="width: 100%">
			<div class="text">文本 2</div>
		</div>

		<div class="mySlides fade">
			<div class="numbertext">3 / 3</div>
			<img src="img/3.jpg" style="width: 100%">
			<div class="text">文本 3</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>
	</div>
  <!-- 引入js文件,注意js文件应该在下方,否则将无法出现错误,个人觉得错误原因应该是元素未加载而去执行js文件导致错误,具体原因还需探究-->
	<script src="show.js" type="text/javascript"></script>
</body>

</html>

css

@charset "UTF-8";
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {
	display:none;
  /*display 为none的含义是不展示元素,但是且不占用空间*/
}
/* 幻灯片容器 */
.slideshow-container {
 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

var slideIndex = 1;

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

function currentSlide(n) {
 showSlides(slideIndex = n);
}

function showSlides(n) {
 var i;
 var slides = document.getElementsByClassName("mySlides");
 var dots = document.getElementsByClassName("dot");
 if (n > slides.length) {slideIndex = 1} 
 if (n < 1) {slideIndex = slides.length}
 for (i = 0; i < slides.length; i++) {
   slides[i].style.display = "none"; 
 }//class为mySlides下的元素,即不展示项目的图片元素、数字元素和文本元素
 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";//轮播图片对应下标样式激活
}
showSlides(slideIndex);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
基于javascript实现日历功能原理及代码实例
May 07 #Javascript
Vue简单实现原理详解
May 07 #Javascript
angular组件间通讯的实现方法示例
May 07 #Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 #Javascript
Vue双向绑定实现原理与方法详解
May 07 #Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 #Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 #Javascript
You might like
PHP 数组遍历顺序理解
2009/09/09 PHP
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
JS中==与===操作符的比较
2009/03/21 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
Python设计模式之代理模式简单示例
2018/01/09 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
自荐信格式的六要素
2013/09/21 职场文书
设计部经理的岗位职责
2013/11/16 职场文书
努力学习演讲稿
2014/05/10 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS
Java 超详细讲解hashCode方法
2022/04/07 Java/Android