جاوا اسکریپت
سلام دوستان وقت بخیر
بچه ها کسی میدونه چه کدی باید نوشته که با هربار زدن روی دکمه عکس بعدی رو نمایش بده؟
مثلا در نظر بگیرین اسلایدری درست کردین و میخایین با هربار زدن روی دکمه سمت راست یه عکس متفاوت نمایش بده
کسی میتونه راهنمایی کنه
پاسخ‌ها
5
سلام
دوتا کار میشه کرد :
1 ) لیستی (array) از url تصاویر اسلایدر داشته باشی که با کلیک روی یک دکمه بگه بره روی url بعدی !
2) بوسیله HTML و CSS با کلیک روی دکمه display تمام عکس ها رو none کنه و یکی رو block یا flex کنه !
نه نه متوجه مشدی
ببین من دیسپلی عکس هارو نان کردم و با استفاده از classlist توی جاوا اسکریپت به ایتم تام دسترسی پیدا کردم و کلسی که شامل display flex هست رو اد میدم ولی با کلیک کردن روی ایتم خودم فقط یک عکس نمایش داده میشه و عکس دوم نمایش داده نمیشه
نمیدونم چطوری توضیح بدم
میخام اپشنی درست بشه که با هربار کلیک کردن بره عکس بعدی
یعنی دوتا دکمه داشته باشه
قبلی و بعدی
که با کلیک کردن روی هرکدوم عکس قبل و عکش بعد رو نمایش بده
@SpyStar0003
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد
نگرفتم منظورتا!
الان وقتی flex رو اضافه میکنی بهش none رو پاک میکنی یا ن؟؟؟؟
یا یه چیز دیگه
مثلا میخای با کلیک روی خود عکس هم بره عکس بعدی ؟؟؟؟؟
نه ببین مثلا من ۱۰ تا عکس دارم
Display همه none بجز یکی
با کلیک روی المنت کلسی به عکس اول اضافه میشه ک display flex داره
وقتی باز کلیک میکنم ارور میده و عکس بعدی رو نمایش نمیده
@SpyStar0003
ببین داداش من ارورت رو که ندیدم!
همچین مواقعی متن ارور رو باید بخونی ببینی چی میگه
ولی برای اینکه بهتر بهت کمک کنم همین الان یه مثال ساده رو درست کردم
ببین این HTML ...
<!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">
<link rel="stylesheet" href="https://roocket.ir/./style.css">
<script src="./script.js" defer></script>
<title>Document</title>
</head>
<body>
<img class="flex slide" src="./pictures/15760745711-ivjksIhvAs7TUXbQCxAU0A-min.jpg" alt="sadsadas">
<img class="slide" src="./pictures/react-native-for-android-development-425c975625bc48c2b75b90df57b47c6b.png" alt="asdasdadasdad">
<img class="slide" src="./pictures/react-context-api-4929b3703a1a7082d99b53eb1bbfc31f.png" alt="qweqeqwe">
<img class="slide" src="./pictures/one-year-of-react-native.png" alt="fsafasdasd">
<img class="slide" src="./pictures/Annotation 2022-05-18 122325.png" alt="gsgsgsfg">
<button onclick="next()"> Next </button>
<button onclick="prev()"> prev </button>
</body>
</html>این css ...
img {
width: 500px;
height: 400px;
}
.slide {
display: none;
}
.flex {
display: flex !important;
}اینم جاوا اسکریپت...
let pictures = document.querySelectorAll(".slide")
console.log(pictures)
let i = 0
const next = () => {
pictures[i].classList.remove("flex")
console.log(pictures.length , i)
if(i == pictures.length - 1) {
i = 0
} else {
++i
}
pictures[i].classList.add("flex")
}
const prev = () => {
pictures[i].classList.remove("flex")
console.log(pictures.length , i)
if(i === 0) {
i = pictures.length
} else {
--i
}
pictures[--i].classList.add("flex")
}حالا یه نگاه بکن ببین میتونی مشکلتو دقیق تر به من بگی ...
چون اینجوریه پیاده کردن اسلایدر ...
یه تفاوت های جزیی هست ولی اصلش همینه