时间戳

首页 > 解决方案 > 如何修复 prv 箭头此幻灯片放映

javascript - 如何修复 prv 箭头此幻灯片放映

问题描述

当我转到第二张照片并想单击返回键时，我必须单击两次。如果我更改 n 的值并将其设为 0。下一个函数发生故障，这就是问题所在。帮我修理 ty 以帮助我 .................................... ..................................................... ..

// alert('');
let topImg = document.querySelector('.top-img img')
let downImgs = document.querySelectorAll('.imgs-down img')
let ArrayIMg = ["img/3-kid.jpeg","img/men-1.jpg","img/woamn-1.jpeg" ,"img/woman-2.jpg"]
let n = 1;
// let b = 1

downImgs.forEach(img=>{
 img.addEventListener('click' , ()=>{
     topImg.src = img.src
 });
});

function nxt(){
 
 topImg.setAttribute('src' , ArrayIMg[n])
 n++
  if(n>=ArrayIMg.length){n=0}

}

function prv(){
    if(--n<0){
      
       n = ArrayIMg.length -1
     
    }
    topImg.setAttribute('src' , ArrayIMg[n])
    // console.log(n)
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

img{
    width: 150px;
    height: 150px;
}

.parent-all{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.top-img img{
    width: 100%;
    height:450px;
    object-fit: cover;

    
}
.top-img{
    position: relative;
}


.next,
.prv{
    color:white;
    cursor:pointer;
    top:35%;
    font-size: 30px;
    padding:5px;
    margin:5px;
    background: black;
    position: absolute;
    z-index: 99;
}

.next{
    right:0;
}
.prv{
    left:0;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exam slider with if </title>
    <link rel="stylesheet" href="exam.css">
</head>

<body>
    <section class="parent-all">
        <figure class="top-img">
            <img src="img/3-kid.jpeg" alt="">
        </figure>

        <figure class="imgs-down">
            <img src="img/3-kid.jpeg" alt="">
            <img src="img/men-1.jpg" alt="">
            <img src="img/woamn-1.jpeg" alt="">
            <img src="img/woman-2.jpg" alt="">
        </figure>
 
       
            <span class="next" onclick="nxt()">&#10095</span>
            <span class="prv" onclick="prv()">&#10094</span>
  
    </section>

    <script src="exam.js"></script>
</body>

</html>

标签： javascripthtmlcss

解决方案

很抱歉，您无缘无故地过度使用了 javascript 部分。

从 n=0 开始，坚持基础。

let n = 0;
function nxt(){
   n = n+1 === ArrayIMg.length ? 0 : n+1;
   topImg.setAttribute('src' , ArrayIMg[n]);
}

function prv(){
    n = n === 0 ? ArrayIMg.length-1 : n - 1;
    topImg.setAttribute('src' , ArrayIMg[n])
}

演示：https ://jsfiddle.net/mey3puzL/

推荐阅读