广州专业网站建设后台管理便捷,黄岐建网站,淘宝美工培训推荐,wordpress 清单 主题原理介绍
图片轮播的原理是通过控制显示和隐藏不同的图片来实现图像的切换#xff0c;从而创建连续播放的效果。用到的知识点有定位和定时器。
实现步骤#xff1a; HTML 结构#xff1a; 首先#xff0c;需要在HTML中创建一个包含轮播图片的容器#xff0c;通常使用 从而创建连续播放的效果。用到的知识点有定位和定时器。
实现步骤 HTML 结构 首先需要在HTML中创建一个包含轮播图片的容器通常使用 div 或 ul 元素。每张图片通常嵌套在容器内的单独元素中例如 div 或 li。 CSS 样式 通过CSS样式定义轮播容器的尺寸、位置、样式以及图片的尺寸和位置。使用CSS来设置图片的显示和隐藏通常通过display: none;或者opacity: 0;来隐藏不显示的图片。 JavaScript 逻辑 JavaScript用于控制图片的切换。 通过JavaScript获取所有的轮播项图片以及控制按钮如上一张和下一张按钮。 使用一个变量通常称为currentSlide来跟踪当前显示的图片的索引。 当用户点击上一张或下一张按钮时JavaScript会更新currentSlide的值并根据currentSlide来显示相应的图片。 通常会实现循环播放当显示最后一张图片时再点击下一张按钮会回到第一张图片以及当显示第一张图片时再点击上一张按钮会回到最后一张图片。 可以使用定时器例如setInterval来自动切换图片实现自动播放功能。
实现过程
html部分html结构有四部分最外层的容器然后放置图片的容器、切换的按钮图片的序号。
bodydiv classcontainerdiv classslidediv classimg1/div/divdiv classslidediv classimg2/div/divdiv classslidediv classimg3/div/divdiv idnextBtngt;/divdiv idprevBtnlt;/divdiv classcontrolsul classnum-ulli1/lili2/lili3/li/ul/div/div
/bodycss部分利用定位布局好容器里元素的位置。
style.container {width: 400px;height: 200px;margin: 0 auto;overflow: hidden;position: relative;}.slide {width: 100%;height: 100%;display: none;}.img1 {width: 400px;height: 200px;background: yellow;}.img2 {width: 400px;height: 200px;background: goldenrod;}.img3 {width: 400px;height: 200px;background: yellowgreen;}#prevBtn,#nextBtn {width: 20px;height: 20px;border-radius: 50%;top: 50%;transform: translateY(-50%);display: flex;justify-content: center;align-items: center;cursor: pointer;background-color: rgba(0, 0, 0, 0.3);}#prevBtn {position: absolute;left: 20px;z-index: 2;}#nextBtn {position: absolute;right: 20px;z-index: 2;}.controls {position: absolute;left: 50%;bottom: 20px;transform: translateX(-50%);z-index: 2;}.num-ul {list-style: none;padding: 0;margin: 0;display: flex;gap: 8px;}.num-ul li {width: 20px;height: 20px;border-radius: 50%;background-color: rgba(0, 0, 0, 0.3);display: flex;justify-content: center;align-items: center;}/style加上css 效果图如下
js部分利用js实现图片的切换切换时下面的序号按钮的背景根据当前显示的图切换样式。
scriptlet timer null; // 定时器const slides document.querySelectorAll(.slide); // 图片容器const containerDom document.getElementsByClassName(container)[0];var numUlDom document.getElementsByClassName(num-ul)[0]; // 数字按钮父级容器var numList document.getElementsByClassName(num-ul)[0].getElementsByTagName(li); // 数字切换按钮列表let currentSlide 0;// 设置图片的样式function showSlide(index) {slides[currentSlide].style.display none;numList[currentSlide].style.backgroundColor ; // 清空上一个按钮的样式currentSlide (index slides.length) % slides.length;numList[currentSlide].style.backgroundColor #ccc;slides[currentSlide].style.display block;}function nextSlide() {showSlide(currentSlide 1);}function prevSlide() {showSlide(currentSlide - 1);}// 鼠标移入容器停止自动播放containerDom.addEventListener(mouseenter, closeAutoShow);// 鼠标移出容器开启自动播放containerDom.addEventListener(mouseleave, autoPlay);// 监听切换按钮document.getElementById(nextBtn).addEventListener(click, nextSlide);document.getElementById(prevBtn).addEventListener(click, prevSlide);// 数字按钮点击事件numUlDom.addEventListener(click, numClick);// 数字按钮点击事件function numClick(e) {// ulDom.style.transition 0.5s;// 检查点击的目标是否是一个li元素if (e.target.tagName LI) {// 获取被点击的li元素的内容或索引const clickedItem event.target;const clickedIndex Array.from(numUlDom.children).indexOf(clickedItem);if (clickedIndex undefined) {return;}console.log(currentSlide, clickedIndex);numList[currentSlide].style.backgroundColor ; // 清空上一个按钮的样式numList[clickedIndex].style.backgroundColor #ccc;showSlide(clickedIndex);}}// 定时器开始function autoPlay() {timer setInterval(nextSlide, 3000);}// 定时器结束function closeAutoShow() {clearInterval(timer);}showSlide(0);// 自动播放autoPlay();/script总结
实现轮播图的方法多种多样这里只是介绍其中一种。原理就都差不多主要根据自己需求而定。
