- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在构建一个简单的 slider ,但我一生都无法弄清楚为什么我的点总是落后 1 步,如果我用简单的 + 1 来改变它,它会抛出我的 slider 循环,请参阅写下来会更有意义。
https://codepen.io/flashvenom/pen/RwborBy
这可行,但总是落后一步
counter++;
dots.querySelector("ul li:nth-child(" + counter + ")").classList.add("dwAccT--active");
这个点可以工作,但随后会抛出 slider 循环
counter++;
counterPlus = 1 + counter;
dots.querySelector("ul li:nth-child(" + counterPlus + ")").classList.add("dwAccT--active");
最佳答案
我将你的函数dwAutoPlay
简化为
function dwAutoPlay(counter){
if(playing !== true) return;
setTimeout(function(){
counter++;
dwAccUl.style.transform = "translateX(-" + counter%totalTiles + "00%)";
dots.querySelector(".dwAccT--active").classList.remove("dwAccT--active");
dots.querySelector("ul li:nth-child(" + (1+counter%totalTiles) + ")")
.classList.add("dwAccT--active");
dwAutoPlay(counter);
}, 3000);
}
const accordion = document.getElementById("dwAcc");
const dwAccUl = document.getElementById("dwAccUl");
let playing = true;
let tiles = accordion.getElementsByClassName("dwAccLi");
let totalTiles = tiles.length;
console.log(totalTiles)
const dots = document.getElementById("dots");
let firstActive = accordion.firstElementChild;
//add initial active class to first slide
firstActive.classList.add("dwAccT--active");
//click dot to slide
function createHandler(n) {
return function() {
playing = false;
//If active class exists
if (document.querySelector(".dwAccT--active") !== null) {
//remove active class from all instances
document.querySelector(".dwAccT--active").classList.remove("dwAccT--active");
}
//add active class to current dot
this.classList.add("dwAccT--active");
//animate to slide position
dwAccUl.style.transform = "translateX(-" + n + "00%)";
};
}
//create dots
const createDotsUl = document.createElement("ul");
//Append ul to #dots
dots.appendChild(createDotsUl);
//For each tile add click event listener and create a dot
for (let i = 0; i < tiles.length; i++) {
//create a dot
let createDotsLi = document.createElement("li");
//reference created dot
let createdDot = createDotsUl.getElementsByTagName("li");
//append the created dot to the parent ul
createDotsUl.appendChild(createDotsLi);
//remove existing active class from all dots
document.querySelector(".dwAccT--active").classList.remove("dwAccT--active");
//add inital active class to first dot
document.querySelector("#dwAcc ul li:nth-child(1)").classList.add("dwAccT--active");
//add event handler
createdDot[i].addEventListener("click", createHandler(i));
}
//autoplay function
//start a counter
function dwAutoPlay(counter){
if(playing !== true) return;
setTimeout(function(){
counter++;
dwAccUl.style.transform = "translateX(-" + counter%totalTiles + "00%)";
dots.querySelector(".dwAccT--active").classList.remove("dwAccT--active");
dots.querySelector("ul li:nth-child(" + (1+counter%totalTiles) + ")")
.classList.add("dwAccT--active");
dwAutoPlay(counter);
}, 3000);
}
//initialize autoplay start
dwAutoPlay(0+0);
/*reset*/
html {box-sizing: border-box; overflow-y:scroll;}
*, *:before, *:after {box-sizing: inherit; }
body{background: #000; color: #fff; font-family: sans-serif; font-weight:300;font-size:100%; margin:0;opacity:1;padding:0;transition:1s opacity;overflow-x: hidden; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%; }
a:focus,button:focus,input:focus,textarea:focus,:focus {outline: none;}
h1,h2,h3,h4,h5,h6, ul, li, p{margin: 0; padding: 0; -webkit-margin-before: 0;-webkit-margin-after: 0;-webkit-margin-start: 0px;-webkit-margin-end: 0px; text-align: left;}
#app {
width: 100%;
height: 100%;
}
/*reset end */
#dwAcc{
display: block;
float: left;
overflow: hidden;
position: relative;
max-height: 100vh;
width: 100%;
}
#dwAccUl{
display: flex;
flex-wrap: nowrap;
margin: 0 auto;
padding: 0;
transform: translateX(0);
transition: all ease-in-out 0.5s;
width: auto;
}
.dwAccLi{
flex: 0 0 auto;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
}
.dwAccLi img {
height: auto;
width: 100%;
}
#dots ul{display: block; position: absolute; left: 2em; bottom: 1em; z-index: 1000; width: 320px; margin: 0; padding: 1em 0; list-style-type: none;}
#dots li{background: transparent; border: 2px solid #000; border-radius: 100%; display: block; float: left; height: 10px; margin: 0 10px 0 0; padding: 0; transition: all ease 0.3s; width: 10px;}
#dots li.dwAccT--active{background: #000;}
<!-- START SLIDER -->
<div id="dwAcc">
<div id="dwAccUl">
<div class="dwAccLi" style="background: #507f70 url('https://source.unsplash.com/1600x900/?mountains') no-repeat 0 0; background-size: cover;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg==">
</div>
<div class="dwAccLi" style="background: #6bb8ab url('https://source.unsplash.com/1600x900/?surf') no-repeat 0 0; background-size: cover;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg==">
</div>
<div class="dwAccLi" style="background: #a49c85 url('https://source.unsplash.com/1600x900/?city') no-repeat 0 0; background-size: cover;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg==">
</div>
<div class="dwAccLi" style="background: #d25d00 url('https://source.unsplash.com/1600x900/?sky') no-repeat 0 0; background-size: cover;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg==">
</div>
<div class="dwAccLi" style="background: #d25d00 url('https://source.unsplash.com/1600x900/?sand') no-repeat 0 0; background-size: cover;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg==">
</div>
</div>
<div id="dots"></div>
</div>
<!-- END SLIDER -->
关于javascript计数器总是落后1,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57583988/
我在leetcode上看到这段代码,是一道求众数的题,下面是题目描述: 给定一个大小为 n 的数组,找到多数元素。众数元素是出现次数超过 ⌊ n/2 ⌋ 次的元素。 你可以假设数组是非空的并且多数元素
每次在 JavaScript 中执行特定操作时,例如: $(function() { $('#typing').keyup(function () { switch($(this)
我一直在为网页设计一个计数器,但我一直被这个我无法解决的功能所困扰。 我有一个 4 个 div 的计数器,因为其中两个是小数字,另外两个是大数字,所以第一个运行得很快,我看不到它们的功能。 有人知道如
我已经在文档中进行了一些搜索,并在网上花了一段时间,但找不到解决方案!我希望警报告诉我单击 .thumb 时它处于each() 的哪一次迭代。 EG:有六个.thumb,我点击数字3,浏览器弹出3!
在 Handlebars 中,假设我有 names 的集合.我能怎么做 {{#each names}} {{position}} {{name}} {{/each}} 在哪里 {{position}}
这个问题在这里已经有了答案: Numbering rows within groups in a data frame (9 个回答) 4年前关闭。 我们如何在数据帧的每组中生成唯一的 ID 号?以下
我正在努力解决以下问题。我希望为给定的“一”序列创建一个计数器。例如,我有以下内容: 1 1 1 1 0 0 1 1 1 0 0 1 1 1 1 鉴于该序列,我希望为 1 的每个序列设置一个计数器直到
我正在努力解决以下问题。我希望为给定的“一”序列创建一个计数器。例如,我有以下内容: 1 1 1 1 0 0 1 1 1 0 0 1 1 1 1 鉴于该序列,我希望为 1 的每个序列设置一个计数器直到
我有一个jsfiddle here 这是一个简单的 JavaScript 函数,可以计算出设定的数字。 是否可以进行这种计数,但也保留一位小数 所以它算 1.1、1.2、1.3 等。 func
我正在构建一个计数器,当我按下鼠标时,它应该增加到 maxValue 并且减少不超过 0。我还可以选择将计数器重置为其初始值:0。另外,如果 maxValue 是偶数,它应该计数到该数字。但是,如果
所以我成功地为字母和单词构建了其他计数器,但现在我只能用这个来计算句子。我的代码如下,当我运行它时,它会返回很多错误消息: #include #include #include int main
Closed. This question is off-topic。它当前不接受答案。
我需要一个计数器,它会随着某些任务的完成而递增。我们只需要最后一小时的值,即窗口将移动而不是静态时间。 解决此问题的最佳方法是什么?我能想到的一种方法是拥有一个大小为 60 的数组,每分钟一个,并更新
我希望使用计数器来为我提供独特的引用系统。我想单击一个按钮,然后检查一个字段/文件中的最后一个数字,然后简单地向其添加 1,然后将其插入到屏幕上的字段中? 不确定执行此操作的最佳方法或具体如何执行此操
我有一个用 php 制作的表格,在该表格内我显示了数据库中的一些内容。我在每个 td 中创建了一个简单的按钮(类似于 Like),我希望每次点击它都会增加 1。这是带有按钮的行: echo "
如何将数据库中的值转换为可用于 if else 函数的 int 值? 例如:在我的数据库“armnumber = 3”中,如何在 if else 函数中使用它? 代码 string myConnect
我需要生成唯一的“ids”,问题是,它只能在 1 - 99999 之间。 “好”的是,它仅在与另一列组合时必须是唯一的。 我们有组,每个组都有自己的“group_id”,每个组都需要类似 unique
有这个简单的代码: UPDATE counter SET c= c +1 where id = 1; 并且它在开头的 c 字段中为 null 的情况下不起作用。它只有在已经输入了一些数字时才有效,也就
我正在尝试在 python 中构建一个具有闭包属性的计数器。以下工作中的代码: def generate_counter(): CNT = [0] def add_one():
我使用 CSS 来计算 HTML 文档中的部分: body {counter-reset: sect;} section:before { counter-increment: sect;
我是一名优秀的程序员,十分优秀!