當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript实例 幻灯片（自动播放 且 能点击）
生活随笔
收集整理的這篇文章主要介紹了
JavaScript实例 幻灯片（自动播放 且 能点击）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
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來實現(xiàn)幻燈片的切換的
原理：設置一個幻燈片容器，將圖片和 點 和 切換按鈕放到容器中
過渡動畫(transition)和animation動畫。
JS部分：
需要考慮的是settimeout的關(guān)閉與打開
每次點擊向右移或左移都要關(guān)閉settimeout
總結(jié)
以上是生活随笔為你收集整理的JavaScript实例 幻灯片（自动播放 且 能点击）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c# 正则表达式 html标签,C#匹配
- 下一篇： Web在线3D编辑器-全场景编辑全新功能