التحكم بمعرض الصور عن طريق الأزرار button img

Ahmed Alkangooni · 9 سبتمبر 2021

كيف اخلي صوره ثابته و في زرbuntton كل زر صوره و عند الضغط علي button1 صوره1/ button2 صوره 2/وbutton 3 صوره 3

تم التعديل في 9 سبتمبر 2021 بواسطة Wael Aljamal
توضيح السؤال

Wael Aljamal · 9 سبتمبر 2021

تدعى هذه التقنية Slideshow / Carousel يمكن تطبيقها بعدة طرق، ويمكن استخدام Bootstrap مثلا،

أو تطبيق مايشبه الشيفرة التالية حيث يوجد أزرار في الأسفل تتحكم برقم الصورة التي سيتم عرضها

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  
  /*  تنسيقات عامة  */
  
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* حاوية عرض الصور */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* أزرار التحكم*/
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* موقع أزرار التحكم الجانبية */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* إضافة تأثيرات لونية على الأزرار */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* تنسيق النص */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* تأثير التحرك */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* تنسيق للشاشات الصغيرة */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="img_nature_wide.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="img_snow_wide.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="img_mountains_wide.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>

<script>

 // شيفرات التحكم بتبديل الصور 
 var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");  // الوصول لمعرض الصور
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    // ضمان تحديد أول صورة كالأولى
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");   
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";     // إضائة الزر الفعال
}
</script>

</body>
</html>

يمكنك ذكر أي جزء للتوضيح إن لم تفهمه

التحكم بمعرض الصور عن طريق الأزرار button img

السؤال

Ahmed Alkangooni

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية