• 1401/06/26

عمل موقتی تغییر src عکس ها در JS :

با عرض سلام و خدا قوت بابت آموزش های عالی و بسیار مفید شما

بنده یک کد نوشتم برای تغییر در آدرس عکس ها ولی متاسفانه به طور کامل اجرا نمیشه و خیلی سریع به حالت قبل خودش بر می گرده.

 

ممنون میشم اگر بتونید من رو راهنمایی کنید

 

<!DOCTYPE html>
<html lang="en" dir="rtl">
<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">
    <link rel="stylesheet" href="test.css">
    <title>Document</title>
</head>
<body>
    <div class="slider">
        <div class="slider__container">
            <a href="" class="slider__next slider__btn" onclick="nextSlide();click()">&amp;#8249;</a>
            <nav class="slider__nav fade">
                <img src="Pic/necklace.png" alt="" class="slider__img img1">
                <img src="Pic/ring-gold.png" alt="" class="slider__img img2">
                <img src="Pic/Set.png" alt="" class="slider__img img3">
                <img src="Pic/Vintage.jpg" alt="" class="slider__img img4">
                <img src="Pic/image3.png" alt="" class="slider__img img5">

            </nav>
            <a href="" class="slider__previous slider__btn">&amp;#8250;</a>
        </div>
        <div class="slider__text__container">
            <p class="slider__text1">وزن :‌ 1.330 g</p>
            <p class="slider__text2">قیمت : 1,550,000 تومان</p>
        </div>
    </div>
    <script src="test.js"></script>
    <!-- <script src="test2.js"></script> -->
</body>
</html>
const src1 = "Pic/necklace.png";
const src2 = "Pic/ring-gold.png";
const src3 = "Pic/Set.png";
const src4 = "Pic/Vintage.jpg";
const src5 = "Pic/image3.png";
let img1 = document.getElementsByClassName("img1")[0];
let img2 = document.getElementsByClassName("img2")[0];
let img3 = document.getElementsByClassName("img3")[0];
let img4 = document.getElementsByClassName("img4")[0];
let img5 = document.getElementsByClassName("img5")[0];

let next = document.getElementsByClassName("slider__next")[0];



function nextSlide() {
  var i = 0;
  i++;
  if (i == 1) {
    img1.src = src2;
    img2.src = src3;
    img3.src = src4;
    img4.src = src5;
    img5.src = src1;
  }

  else if(i == 2){
    img1.src = src3;
    img2.src = src4;
    img3.src = src5;
    img4.src = src1;
    img5.src = src2;
  }

  else if(i == 3){
    img1.src = src4;
    img2.src = src5;
    img3.src = src1;
    img4.src = src2;
    img5.src = src3;

  }

  else if (i == 4){
    img1.src = src5;
    img2.src = src1;
    img3.src = src2;
    img4.src = src3;
    img5.src = src4;

  }

  else if (i == 5){
    img1.src = src1;
    img2.src = src2;
    img3.src = src3;
    img4.src = src4;
    img5.src = src5;
  }
  
  else if (i>6){
    i = 1;
    return i;
  }
  
}

 



.slider__container{
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 1rem;
}

.slider__btn{
    width: 25px;
    font-size: 3rem;
    color: var(--white--color);
    text-align: center;
    background-color: #dbdbdb;
    outline: none;
    border-radius: 5px;
}

.slider__nav{
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
    width: 100%;
}

.slider__img{
    border-radius: 20px;
    outline: none;
}


.img1{
    order: 1;
}

.img2{
    order: 2;
}

.actice , .img3{
    order: 3;
}

.img4{
    order: 4;
}

.img5{
    order: 5;
}

.img1 , .img5{
    width: 8%;
    height: 8%;
}

.img2 , .img4{
    width: 14%;
    height: 14%;
}

.img3{
    width: 30%;
    height: 30%;
}

.slider__text__container{
    background-color: #dbdbdb;
    border-radius: 10px;
    margin: 2rem;
    outline: none;
    overflow: hidden;
}

.slider__text1{
    padding: 1rem;
    text-align: center;
    border-bottom: 2px solid var(--white--color);
    overflow: hidden;
    /* border-radius: 10px; */
    outline: none;


}

.slider__text2{
    border-top: 2px solid var(--white--color);
    padding: 1rem;
    text-align: center;;
}
  • 1401/06/27
  • ساعت 07:43

سلام ..

متغیری به نام i رو داخل فانکشن nextSlide تعریف کردید .

باید بیرون از فانکشن این متغیر رو تعریف کنید و داخل فانکشن فقط مقدارشو تغیر بدید .

موفق باشید.


  • 1401/06/27
  • ساعت 19:54

سلام دوست من وقتتون بخیر

ممنون از پاسخ صحیح شما


logo-enamadlogo-samandehi