微件:轮播图：修订间差异
跳转到导航
跳转到搜索
（创建页面，内容为“<includeonly> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { createSlider(images) }); let slider = document.getElementById('slider'); let dotsContainer = document.getElementById('dotsContainer'); let currentSlide = 0; function createSlider(images, links) { images.forEach((obj, index) => { let img = document.createElement('img'); img.src = obj.src; img.style.opacity =…”） |
无编辑摘要 |
||
| （未显示同一用户的5个中间版本） | |||
| 第1行： | 第1行： | ||
<includeonly> | <includeonly> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
const images=[ | |||
{ | |||
src: 'https://heishenhua.wiki/w/images/wiki_bg.png', | |||
link: 'https://www.baidu.com' | |||
}, | |||
{ | |||
src: 'https://inews.gtimg.com/om_bt/O6SG7dHjdG0kWNyWz6WPo2_3v6A6eAC9ThTazwlKPO1qMAA/641', | |||
link: 'https://www.semantic-mediawiki.org/wiki/How_to_write_a_JavaScript_to_display_data_in_a_Semantic_MediaWiki' | |||
} | |||
] | |||
document.addEventListener("DOMContentLoaded", function () { | document.addEventListener("DOMContentLoaded", function () { | ||
createSlider(images) | createSlider(images) | ||
| 第13行： | 第23行： | ||
img.src = obj.src; | img.src = obj.src; | ||
img.style.opacity = index === 0 ? 1 : 0; | img.style.opacity = index === 0 ? 1 : 0; | ||
img.style.pointerEvents = index === 0 ? 'auto' : 'none'; | |||
img.onclick = () => window.open(obj.link, '_blank'); | img.onclick = () => window.open(obj.link, '_blank'); | ||
slider.appendChild(img); | slider.appendChild(img); | ||
| 第23行： | 第34行： | ||
dotsContainer.children[0].classList.add('active'); | dotsContainer.children[0].classList.add('active'); | ||
let sliderPrev = document.getElementById('sliderPrev'); | |||
let sliderNext = document.getElementById('sliderNext'); | |||
sliderPrev.onclick = () => prevSlide(); | |||
sliderNext .onclick = () => nextSlide(); | |||
setInterval(() => { | setInterval(() => { | ||
| 第31行： | 第47行： | ||
Array.from(slider.children).forEach((slide, index) => { | Array.from(slider.children).forEach((slide, index) => { | ||
slide.style.opacity = index === currentSlide ? 1 : 0; | slide.style.opacity = index === currentSlide ? 1 : 0; | ||
slide.style.pointerEvents = index === currentSlide ? 'auto' : 'none'; | |||
}); | }); | ||