當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2023/12/10 javascript 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 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

總結

以上是生活随笔為你收集整理的JavaScript实例幻灯片（自动播放且能点击）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： c# 正则表达式 html标签,C#匹配
下一篇： HTML一级菜单和二级菜单区别,Java

javascript

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

CSS:

過渡動畫(transition)和animation動畫。

總結

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