اذهب إلى المحتوى
  • 0

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

Ahmed Ebrahim11

السؤال

السلام عليكم اريد ان اجعل الايقونه في الصوره بجانب النص

2- ايضا" اريد ان اجعل هناك 3 خلفيات تنتقل بين بعضها ب timer  وثلاث ازرار اسفل الصفحه للتحكم بهم كيف يمكنني فعلها

templete 1 (2).zip

Screenshot (138)_LI.jpg

تم التعديل في بواسطة Ahmed Alfadaly
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

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

.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 و تنسيقها و تفاعليتها بكل حرية . 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...