js案例：简单的图片轮播（代码逐行讲解，建议先看完整代码） |
您所在的位置：网站首页 › 播放图片的 › js案例：简单的图片轮播（代码逐行讲解，建议先看完整代码） |
js案例：简单的图片轮播（代码逐行讲解，建议先看完整代码）
|
目录 一.效果预览图 二，实现思路 1.html部分 2.css部分 3.js部分 三.完整代码 一.效果预览图
这个容器div具有"class"属性，值为"wp"，表示"wrapper"（包装器）。它设置了幻灯片的尺寸和定位方式。 
这个ID为"list"的div包含了一系列的 ID为"box"的div表示分页器的圆点。每个标签代表一个圆点，对应幻灯片中的一张图片。标签的数量应与幻灯片的数量相匹配。 ID为"r"和"l"的div通常表示幻灯片的向右（前进）和向左（后退）导航按钮。 2.css部分 *{ margin: 0; padding: 0; }这个星号表示应用于所有元素的通用样式。在这里，它将页面上所有元素的外边距和内边距都设置为0。 .wp{ width: 250px; height: 400px; margin: 40px auto 0; position: relative; overflow: hidden; }这个类选择器.wp用于设置幻灯片容器的样式。它设置了幻灯片容器的宽度和高度为250px和400px，通过margin属性设置了顶部边距40px，auto表示自动水平居中对齐。position: relative表示相对定位，并设置了overflow: hidden，使超出容器尺寸的内容被隐藏。 #list{ display: flex; width: 1000px; transform: translateX(0); /* 添加过渡动画 */ transition: all 1s; }这个ID选择器#list用于设置图片列表的样式。通过display: flex实现了图片的水平排列。width: 1000px设置了图片列表的宽度为1000px。transform: translateX(0)是一个位移变换，这里设置为初始位置，可以通过改变translateX的值来切换不同的幻灯片位置。transition: all 1s表示添加了1秒的过渡动画效果，使幻灯片在切换时具有平滑的过渡效果。 .wp div img{ width: 250px; height: 400px; }这个选择器用于设置幻灯片中的图片样式。通过设置width: 250px和height: 400px，将图片的宽度和高度限制为250px和400px。 #box { height: 40px; width: 100%; position: absolute; background: rgba(0, 0, 0, 0.5); left: 0; bottom: 0; display: flex; justify-content: center; align-items: center; }这个ID选择器#box用于设置分页器容器的样式。它设置了分页器容器的高度为40px，宽度为100%，并使用position: absolute相对于父容器进行定位。background: rgba(0, 0, 0, 0.5)设置了背景为半透明的黑色。left: 0和bottom: 0将分页器容器定位在父容器的左下角。display: flex、justify-content: center和align-items: center实现了分页器内圆点的水平居中对齐和垂直居中对齐。 #box span { width: 10px; height: 10px; background: #fff; border-radius: 50%; margin: 0 5px; cursor: pointer; }这个选择器用于设置分页器容器内的圆点样式。通过width: 10px和height: 10px将圆点的宽度和高度设置为10px。background: #fff将圆点的背景颜色设置为白色。border-radius: 50%将圆点的边框半径设置为50%，使其呈现圆形。margin: 0 5px设置了圆点之间的水平间距为5px。cursor: pointer将鼠标光标样式设置为手型，表示可以进行点击操作。 #box span:hover{ background: pink; box-shadow: 0 0 0 2px #ccc; }这个选择器用于设置鼠标悬停在圆点上时的样式。background: pink将圆点的背景颜色设置为粉色。box-shadow: 0 0 0 2px #ccc设置了圆点的阴影效果，使其在悬停时显示一个2像素宽度的灰色边框。 #r{ width: 20px; height: 20px; position: absolute; top: 170px; right: 0; background: url(./images/右箭头.png)no-repeat 0 0/100% 100%; }ID选择器#r用于设置幻灯片的向右导航按钮的样式。宽度和高度都设置为20px。通过position: absolute将按钮相对于父容器进行定位。top: 170px将按钮定位在距离顶部170px的位置。right: 0将按钮定位在父容器的右侧。background: url(./images/右箭头.png)no-repeat 0 0/100% 100%设置了按钮的背景为指定图片，并将该图片作为背景图实现按钮的显示。 #l{ width: 20px; height: 20px; position: absolute; top: 170px; left: 0; background: url(./images/左箭头\ \(1\).png)no-repeat 0 0/100% 100%; }ID选择器#l用于设置幻灯片的向左导航按钮的样式。宽度和高度都设置为20px。通过position: absolute将按钮相对于父容器进行定位。top: 170px将按钮定位在距离顶部170px的位置。left: 0将按钮定位在父容器的左侧。background: url(./images/左箭头\ \(1\).png)no-repeat 0 0/100% 100%设置了按钮的背景为指定图片，并将该图片作为背景图实现按钮的显示。 3.js部分 1. var box=document.getElementById('box');这行代码获取具有id为’box’的元素，并将其赋值给变量box。 2. var spanBox=box.getElementsByTagName('span');这行代码获取box元素下的所有span元素，并将这些元素保存在变量spanBox中。 3. var list=document.getElementById('list');这行代码获取具有id为’list’的元素，并将其赋值给变量list。 4. spanBox[0].onclick=function(){ list.style.transform="translateX(0px)"; };这段代码给spanBox[0]元素绑定了一个点击事件处理函数。当点击spanBox[0]元素时，它会将list元素的transform样式属性设置为translateX(0px)，即不产生水平偏移。 5. spanBox[1].onclick=function(){ list.style.transform="translateX(-250px)"; console.log("点击了第二个图片"); };这段代码给spanBox[1]元素绑定了一个点击事件处理函数。当点击spanBox[1]元素时，它会将list元素的transform样式属性设置为translateX(-250px)，即产生水平偏移250个像素，并在控制台打印消息"点击了第二个图片"。 6. spanBox[2].onclick=function(){ list.style.transform="translateX(-500px)"; };这段代码给spanBox[2]元素绑定了一个点击事件处理函数。当点击spanBox[2]元素时，它会将list元素的transform样式属性设置为translateX(-500px)，即产生水平偏移500个像素。 7. spanBox[3].onclick=function(){ list.style.transform="translateX(-750px)"; };这段代码给spanBox[3]元素绑定了一个点击事件处理函数。当点击spanBox[3]元素时，它会将list元素的transform样式属性设置为translateX(-750px)，即产生水平偏移750个像素。 8. var n=0;这行代码声明了一个名为n的变量，并将其初始化为0。 9. var r=document.getElementById('r'); var l=document.getElementById('l');这行代码通过getElementById方法获取具有id为’r’和’l’的元素，并将它们分别赋值给变量r和l。 10. r.onclick=function(){ if(n0){ n--; } list.style.transform="translateX(-"+n*250+"px)"; console.log(n); };这段代码给变量l绑定了一个点击事件处理函数。当点击l元素时，它会执行以下操作： 如果n大于0（图片索引的最小值），则将n递减1。计算translateX的值为-n*250，将它赋值给list元素的transform样式属性。这样可以产生水平偏移。在控制台打印n的值。以上是代码片段的详细解释。这段代码主要包含了事件处理函数，通过点击不同的按钮来改变list元素的transform样式属性，从而产生水平偏移效果。同时，它还使用了变量n来记录当前显示的图片索引，在切换图片时增加或减少n的值，并将其应用于水平偏移的计算。 三.完整代码 简单轮播图 *{ margin: 0; padding: 0; } .wp{ width: 250px; height: 400px; margin: 40px auto 0; position: relative; overflow: hidden; } #list{ display: flex; width: 1000px; transform: translateX(0); /* 添加过渡动画 */ transition: all 1s; } .wp div img{ width: 250px; height: 400px; } #box { height: 40px; width: 100%; position: absolute; background: rgba(0, 0, 0, 0.5); left: 0; bottom: 0; display: flex; justify-content: center; align-items: center; } #box span { width: 10px; height: 10px; background: #fff; border-radius: 50%; margin: 0 5px; cursor: pointer; } #box span:hover{ background: pink; box-shadow: 0 0 0 2px #ccc; } #r{ width: 20px; height: 20px; position: absolute; top: 170px; right: 0; background: url(./images/右箭头.png)no-repeat 0 0/100% 100%; } #l{ width: 20px; height: 20px; position: absolute; top: 170px; left: 0; background: url(./images/左箭头\ \(1\).png)no-repeat 0 0/100% 100%; }
// 获取需要点击的分页器
let box = document.getElementById('box');
let spanBox = box.getElementsByTagName('span');
// 获取列表元素
let list = document.getElementById('list');
// 点击分页器
spanBox[0].onclick = function () {
list.style.transform='translateX(0px)'
};
spanBox[1].onclick = function () {
list.style.transform='translateX(-250px)'
console.log('点击了第二个图片');
};
spanBox[2].onclick = function () {
list.style.transform='translateX(-500px)'
};
spanBox[3].onclick = function () {
list.style.transform='translateX(-750px)'
};
let n = 0;
let r = document.getElementById('r');
let l = document.getElementById('l');
r.onclick = function (){
n0? n-- :n=0;
console.log(n);
list.style.transform='translateX(-'+n*250+'px)'
};
|
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |