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 相关文章推荐
js常用函数 不错
Sep 08 Javascript
面向对象的javascript(笔记)
Oct 06 Javascript
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 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
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
Python turtle库的画笔控制说明
2020/06/28 Python
python实现邮件循环自动发件功能
2020/09/11 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
存储过程的优点有哪些
2012/09/27 面试题
前台文员岗位职责及工作流程
2013/11/19 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
校运会广播稿
2015/08/19 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android