企业做微网站,凡客诚品支付方式,公司介绍ppt制作,庄河城乡建设管理局网站代码在文章最后面#xff08;含图片URL#xff09;
实现功能
按向左按钮图片显示上一张按向右按钮图片显示下一张每隔2000毫秒显示下一张图底部三个圆点显示当前的图片的编号
实现流程
初始化图片数组 创建一个包含图片URL的数组#xff0c;轮播时会通过这个数组来切换图…代码在文章最后面含图片URL
实现功能
按向左按钮图片显示上一张按向右按钮图片显示下一张每隔2000毫秒显示下一张图底部三个圆点显示当前的图片的编号
实现流程
初始化图片数组 创建一个包含图片URL的数组轮播时会通过这个数组来切换图片。创建当前索引变量 这个变量用来追踪当前显示的图片索引。创建自动轮播图片函数 该函数负责更改轮播图中显示的图片并根据当前索引更新指示器的状态。创建指示器的函数 此函数在HTML中创建了与图片数量相同的指示器元素并为第一个指示器添加了active-indicator类以表示它是活动的。下一张图片按钮 当用户点击“下一张”按钮时这个函数会被触发。它将currentIndex加一如果索引等于图片数组长度则将索引重置为0然后调用showImage函数来更新图片和指示器。上一张图片按钮 当用户点击“上一张”按钮时这个函数会被触发。它将currentIndex减一如果索引小于0则将索引设置为图片数组的最后一个元素的索引然后调用showImage函数来更新图片和指示器。创建事件监听器 将这些监听器绑定到“下一张”和“上一张”按钮上当按钮被点击时它们会调用相应的函数。启动自动轮播 设置了一个定时器每隔2000毫秒2秒调用一次nextImage函数从而实现图片的自动轮播。
ONGD通过操作DOM元素用CSS类来控制显示的图片和当前图片指示器的状态实现了图片轮播。
完整代码
!DOCTYPE html
html langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleSimple Carousel/title
stylebody {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;}.carousel {position: relative;width: 300px;height: 200px;border-radius: 8px;overflow: hidden;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}.carousel img {width: 100%;height: auto;}.controls {position: absolute;top: 50%;transform: translateY(-50%);width: 100%;display: flex;justify-content: space-between;padding: 0 10px;}.control-button {background-color: white;color: #333;font-size: 20px;width: 30px;height: 30px;border-radius: 50%;display: flex;justify-content: center;align-items: center;cursor: pointer;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}.indicator-container {position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);display: flex;}.indicator {background-color: #ccc;width: 10px;height: 10px;border-radius: 50%;margin: 0 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}.active-indicator {background-color: black;}
/style
/head
body
div classcarouselimg src altImage idcarousel-imagediv classcontrolsbutton classcontrol-button idprev-btn/buttonbutton classcontrol-button idnext-btn/button/divdiv classindicator-container idindicators/div
/divscriptconst images [https://q9.itc.cn/q_70/images03/20240715/8319afaf350346a08a4d51b65638e39d.png,https://n.sinaimg.cn/sinacn20191106ac/42/w500h342/20191106/6b91-ihyxcrp9562392.jpg,https://n.sinaimg.cn/news/transform/20170412/D-Ac-fyecfam0465124.jpg];let currentIndex 0;function showImage(index) {document.getElementById(carousel-image).src images[index];const indicators document.getElementById(indicators).children;for (let i 0; i indicators.length; i) {indicators[i].classList.remove(active-indicator);}indicators[index].classList.add(active-indicator);}function createIndicators() {const indicatorContainer document.getElementById(indicators);for (let i 0; i images.length; i) {const indicator document.createElement(div);indicator.classList.add(indicator);if (i 0) {indicator.classList.add(active-indicator);}indicatorContainer.appendChild(indicator);}}function nextImage() {currentIndex;if (currentIndex images.length) {currentIndex 0;}showImage(currentIndex);}function prevImage() {currentIndex--;if (currentIndex 0) {currentIndex images.length - 1;}showImage(currentIndex);}document.getElementById(next-btn).addEventListener(click, nextImage);document.getElementById(prev-btn).addEventListener(click, prevImage);// Auto-play functionalitysetInterval(nextImage, 2000);createIndicators();showImage(currentIndex);
/script
/body
/html
