• 0

تعديل تنسيقات تصميم واجهة موقع

السلام عليكم 

1-لدي مشكله في عمل كود ال jquery علما" بانني اخذته من مدرب ولكني هناك جزء لم افهمه لماذا وضع slide.lenght ماذا تعني و معني n هل هو عدد الخلفيات 

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

2- المشكله الاخري اريد اللوجو بجانب النص مثل الصوره الاصليه قمت بارفاقها لك

Screenshot (132).png

Screenshot (138)_LI.jpg

templete 1.zip

1 شخص أعجب بهذا

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


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

بالنسبة للمشكلة الثانية , لاحظ الكود الخاص به

        <div class="logo-goo">//سوف نعطيه بعض الأصناف
            <span class="logo mr-auto"></span>//سوف نحذف الصنف mr-auto
            <i class="fa fa-umbrella-beach fa-3x"></i>
            </span>
            <div class="text ">
                <h2>DIAGOONA</h2>
                <p>new bootstrap template</p>
            </div>
        </div>

بعد التعديل يصبح كالتالي

        <div class="logo-goo d-flex align-items-center">
                             ^^^^^^^^^^^^^^^^^^^^^^^^^
            <span class="logo"></span>
            <i class="fa fa-umbrella-beach fa-3x"></i>
            </span>
            <div class="text ">
                <h2>DIAGOONA</h2>
                <p>new bootstrap template</p>
            </div>
        </div>

سوف يعرض اللوجو بجانب النص
أما بالنسبة للكود لا يعمل فهو بسبب أنك لم تقم بتضمين ملف js.js

    <script src="js/js.js"></script>

أرجو منك اضافة السطر , بالنسبة  slides.lenght , لاحظ الكود التالي

var slides = document.getElementsByClassName("mySlides");

لقد قمنا بجلب جميع العناصر التي لديها الصنف mySlides, نريد ان تقوم بعدهم, نستطيع فعل ذلك كالتالي

slides.length

حيث أن الخاصية length تقوم بارجاع عدد العناصر في المصفوفة, أما بالنسبة ل n, لاحظ كود جافاسكربت وكود html 

كود جافاسكربت
function showSlides(n) {

كود html
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>

لاحظ أن الدالة المعرفة في جافاسكربت تستقبل متغير اسمه n , أي عند استدعاءها يجب أن نقوم بتمرير قيمة لها, لاحظ كود html , لقد قمنا باستدعاءها ثلاثة مرات, في كل مرة مررنا قيمة n بقيمة مختلفة , في المرو ألأولى قيمة المتغير n تساوي 1 والمرة الثانية تساوي 2 والمرة الأخيرة والثالثة 3 , ويمكننا استخدام هذه القيمة في الكود الذي ارفقه لك المدرب, سوف تواجهم مشكلة في الكود المرفق وبالتحديد في هذا السطر

slides[slideIndex - 1].style.display = "block"; 

أرجو منك حذفه وتعديل الكود كالآتي

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"; // إخفاء كامل الشرائح
        if (i+1 == n) {
            slides[i].style.display = "block"; 
        }
    }

}

 

1 شخص أعجب بهذا

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


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

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن