文章詳情頁

Javascript幻燈片播放功能實(shí)現(xiàn)過程解析

瀏覽：112日期：2023-10-30 13:40:58

javascript實(shí)現(xiàn)幻燈片播放

實(shí)現(xiàn)原理

step1 設(shè)置容器，包含圖片、翻頁、下標(biāo)等元素，通過相對(duì)定位來布局。 step2 將幻燈片變化，需要改變的元素放在一個(gè)字容器內(nèi)，display設(shè)為none,并且采取動(dòng)畫來變化。 step3設(shè)置js函數(shù)，將應(yīng)該播放的元素樣式激活，其他的元素仍為未激活狀態(tài)或者不展示類的隱藏。

代碼

html

<!DOCTYPE html><html><head><meta charset='UTF-8'><title>Insert title here</title><link rel='stylesheet' href='http://m.cgvv.com.cn/bcjs/style.css' rel='external nofollow' type='text/css'></head><body><div class='slideshow-container'><div class='mySlides fade'><div class='numbertext'>1 / 3</div><img src='http://m.cgvv.com.cn/bcjs/img/1.jpg' style='width: 100%'><div class='text'>文本 1</div></div><div class='mySlides fade'><div class='numbertext'>2 / 3</div><img src='http://m.cgvv.com.cn/bcjs/img/2.jpg' style='width: 100%'><div class='text'>文本 2</div></div><div class='mySlides fade'><div class='numbertext'>3 / 3</div><img src='http://m.cgvv.com.cn/bcjs/img/3.jpg' style='width: 100%'><div class='text'>文本 3</div></div><a onclick='plusSlides(-1)'>❮</a> <a onclick='plusSlides(1)'>❯</a></div><br><div style='text-align: center'><span onclick='currentSlide(1)'></span><span onclick='currentSlide(2)'></span><span onclick='currentSlide(3)'></span></div> <script src='http://m.cgvv.com.cn/bcjs/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);}/* 標(biāo)題文本 */.text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center;}/* 數(shù)字文本 (1/3 等) */.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;}/* 標(biāo)記符號(hào) */.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;}/* 淡出動(dòng)畫 */.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}}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。

JavaScript

上一條：原生JavaScript創(chuàng)建不可變對(duì)象的方法簡(jiǎn)單示例下一條：基于javascript實(shí)現(xiàn)日歷功能原理及代碼實(shí)例

相關(guān)文章：

1. 基于javaweb+jsp實(shí)現(xiàn)企業(yè)車輛管理系統(tǒng)2. XML在語音合成中的應(yīng)用3. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解原創(chuàng)4. 如何使用ASP.NET Core 配置文件5. asp.net core 認(rèn)證和授權(quán)實(shí)例詳解6. ASP.NET MVC使用Boostrap實(shí)現(xiàn)產(chǎn)品展示、查詢、排序、分頁7. jscript與vbscript 操作XML元素屬性的代碼8. ASP.NET Core 7 Razor Pages項(xiàng)目發(fā)布到IIS的詳細(xì)過程9. .NET中實(shí)現(xiàn)對(duì)象數(shù)據(jù)映射示例詳解10. uni-app結(jié)合.NET 7實(shí)現(xiàn)微信小程序訂閱消息推送

排行榜

					
					Java System類兩個(gè)常用方法代碼實(shí)例
解決Android studio 3.6.1 出現(xiàn)Cause: unable to find valid certification path to requested target 報(bào)錯(cuò)的問題
JavaEE Spring MyBatis如何一步一步實(shí)現(xiàn)數(shù)據(jù)庫查詢功能
Python自動(dòng)化之定位方法大殺器xpath
文件上傳服務(wù)器-jupyter 中python解壓及壓縮方式
Python環(huán)境使用OpenCV檢測(cè)人臉實(shí)現(xiàn)教程
如何使用ASP.NET Core 配置文件
全面解析java final關(guān)鍵字
Spring boot如何集成kaptcha并生成驗(yàn)證碼
Android Studio添加日志過濾方式
vue項(xiàng)目如何監(jiān)聽localStorage或sessionStorage的變化
				