مجاوره شكل لنص (تصميم الويب)

لتوسيط الصورة يمكنك تعديل محاذاة العنصر الحاوي لعنصر الصورة ليحمل قيمة المحاذاة إلى الوسط : 

.img-container{
   text-align: center;
}

و لعمل عرض شرائح سنحتاج إنشاء حاوي لعناصر الشرائح و أزرار جانبية لكل من التالي و السابق و بعض عناصر التصفح تكون على شكل نقط و دوائر , ستكون بنية الـ html على نحو مشابه :

<!-- حاوي عرض الشرائح -->
<div class="slideshow-container">

  <!-- الشرائح -->
  <div class="mySlides fade">
    <img src="img1.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="img2.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="img3.jpg" style="width:100%">
  </div>

  <!-- أزرار التالي و السسابق -->
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</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>

سنحتاج لإضافة بعض الـتنسيقات : 

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

/* نححتاج إخفاء الصور في الحالة الافتراضية */
.mySlides {
  display: none;
}

/* أزرار التالي و السابق */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  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;
}

/* المؤشرات */
.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;
}

/* انيميشن */
.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}
}

الان لن يظهر أي شيء لأن كل الشرائح مخفية افتراضا , و لعمل التفاعلية سنحتاج تطبيق المنطق التالي وفق الجافاسكربت : 

• عند الضغط عن زر التالي سنقوم بتحديد الشريحة الما بعد الشريحة الحالية و إظهارها . 
• عند الضغط عن زر السابق سنقوم بتحديد الشريحة الما قبل الشريحة الحالية و إظهارها .

و سنستعمل فيهما دالة plusSlide لنقوم بتمرير رقم 1 معبرا عن التالي , و 1- معبرا عن السابق . 

• عند الضغط عن دائرة سنقوم بتحديد الشريحة المرافقة لها و إظهارها . 

و سنستعمل في هذا دالة currentSlide لنقوم بتمرير الرقم الترتيبي للشريحة المراد تفعيلها . 

و لإظهار الشريحة لن نحتاج إلا لـ : 

• تحديد الرقم الترتيبي للشريحة المراد تفعيلها . 
• إخفاء كامل الشرائح عن طريق إعطاءهم القيمة none في الخاصية display . 
• إظهار الشريحة المفعلة عن طريق إعطاءها القيمة block في الخاصية display . 

فيكون كود الجافاسكربت كالتالي : 

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"; // إخفاء كامل الشرائح
  }
    
  slides[slideIndex-1].style.display = "block"; // تعديل تنسيق الشريحة المفعلة
}

 و بالطبع فإن هذا هو المنطق البسيط للعملية , يمكنك تخصيص بنية الـ html و تنسيقها و تفاعليتها بكل حرية . 

بتاريخ On 8/9/2021 at 22:13 قال Adnane Kadri:

لتوسيط الصورة يمكنك تعديل محاذاة العنصر الحاوي لعنصر الصورة ليحمل قيمة المحاذاة إلى الوسط : 

.img-container{
   text-align: center;
}

و لعمل عرض شرائح سنحتاج إنشاء حاوي لعناصر الشرائح و أزرار جانبية لكل من التالي و السابق و بعض عناصر التصفح تكون على شكل نقط و دوائر , ستكون بنية الـ html على نحو مشابه :

<!-- حاوي عرض الشرائح -->
<div class="slideshow-container">

  <!-- الشرائح -->
  <div class="mySlides fade">
    <img src="img1.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="img2.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="img3.jpg" style="width:100%">
  </div>

  <!-- أزرار التالي و السسابق -->
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</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>

سنحتاج لإضافة بعض الـتنسيقات : 

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

/* نححتاج إخفاء الصور في الحالة الافتراضية */
.mySlides {
  display: none;
}

/* أزرار التالي و السابق */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  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;
}

/* المؤشرات */
.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;
}

/* انيميشن */
.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}
}

الان لن يظهر أي شيء لأن كل الشرائح مخفية افتراضا , و لعمل التفاعلية سنحتاج تطبيق المنطق التالي وفق الجافاسكربت : 

• عند الضغط عن زر التالي سنقوم بتحديد الشريحة الما بعد الشريحة الحالية و إظهارها . 
• عند الضغط عن زر السابق سنقوم بتحديد الشريحة الما قبل الشريحة الحالية و إظهارها .

و سنستعمل فيهما دالة plusSlide لنقوم بتمرير رقم 1 معبرا عن التالي , و 1- معبرا عن السابق . 

• عند الضغط عن دائرة سنقوم بتحديد الشريحة المرافقة لها و إظهارها . 

و سنستعمل في هذا دالة currentSlide لنقوم بتمرير الرقم الترتيبي للشريحة المراد تفعيلها . 

و لإظهار الشريحة لن نحتاج إلا لـ : 

• تحديد الرقم الترتيبي للشريحة المراد تفعيلها . 
• إخفاء كامل الشرائح عن طريق إعطاءهم القيمة none في الخاصية display . 
• إظهار الشريحة المفعلة عن طريق إعطاءها القيمة block في الخاصية display . 

فيكون كود الجافاسكربت كالتالي : 

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"; // إخفاء كامل الشرائح
  }
    
  slides[slideIndex-1].style.display = "block"; // تعديل تنسيق الشريحة المفعلة
}

 و بالطبع فإن هذا هو المنطق البسيط للعملية , يمكنك تخصيص بنية الـ html و تنسيقها و تفاعليتها بكل حرية . 

استاذ لم تغمل كما اردت تظهر اسفل الصوره الاصليه بشكل سئ 

هذا هو الملف

وايضا" هل يمكنك شرح حالات if في الشيفره لم افهم ما فائده lenght اظن انها تقيس طول نص هل لها فائده اخري؟

templete 1.zip