إنشاء عرض شرائح باستخدام قوالب جافا سكريبت. عرض شرائح مذهل بجافا سكريبت

عرض الشرائح للموقع

يجب أن يكون كل مشرف موقع قادرًا على إنشاء عروض شرائح وإضافتها إلى الموقع. يحظى استخدام أشرطة التمرير بشعبية كبيرة ، ويمكن العثور عليها في أي مورد حديث تقريبًا.

وهذه ليست صدفة!

إذا كنت في الصفحة "حيوية"ثم رأيت العمل هناك GIF-حيوية.
عظيم بالطبع! ويتم إنشاؤه بكل بساطة - في Photoshop. فقط له عيب كبير ، مما يحد بشكل كبير من استخدامه على المواقع. لون منخفض.

عروض الشرائح خالية تمامًا من هذا العيب.!

لهذا السبب ، لنشر رسومات وصور فوتوغرافية متعددة الألوان على الموقع ، من الأفضل عدم استخدام الرسوم المتحركة ، بل عرض الشرائح.

فقط في هذه الحالة ، لن يكون استخدام HTML + CSS البسيط ، العزيز على قلبي ، كافيًا. تحتاج إلى تضمين البرامج النصية ... ...!

قم بإنشاء عرض شرائح على الموقع

الحل الأمثل هو الاستخدام مسج.
على الصفحات مزدوج كبيرقسم مخصص لهذه التكنولوجيا الرائعة: مسج، وهناك العديد من الأمثلة على استخدامه. لن أكرر نفسي.

تطبق هنا مسجلخلق عرض الشرائحعلى موقعك ، أو ما يسمى المنزلق... يمكنك أن ترى عمله الآن أدناه ، وتحته بالتفصيلكتبت ما فعلته لإنشاء هذا النوع من شريط التمرير ، وعرضت 7 منزلقات أخرى (!) تعمل.

كما ترى ، شريط التمرير هذا يعمل بشكل جيد! ومع ذلك ، كل شخص آخر أيضا. يمكنك ان ترى لنفسك. => شاهد على الفور

**ملحوظة.على عكس الصفحات الأخرى قسم jQuery، لقد كتبت البرامج النصية اللازمة مباشرة في كود HTML لهذه الصفحة نفسها.
أيضًا ، من المهم جدًا (!) ، أنها تعمل من أجلي من إصدار مختلف من jQuery ، بعد الإصدار الذي أستخدمه هنا.

إذا كنت أستخدم الإصدار هناك مسج v.1.10.1.minثم هنا الإصدار 1.8.3.min

ومع ذلك ، بمزيد من التفاصيل حول هذا وعن كل شيء آخر ، بالترتيب - أبعد من ذلك.

تحضير عرض الشرائح

عادةً ما يتكون عمل إنشاء عرض شرائح وتثبيته على موقع ويب من 4 مراحل رئيسية.

تحضير الصور لشريط التمرير

1. التقط الصور. الشيء الرئيسي هو أنه يجب أن يكونوا كذلك حجم واحد... تحتاج إلى قياسها بعناية.
في هذه الحالة ، أخذت صور جاهزةمن المواد الإضافية المرفقة بالدورة التدريبية. أي واحد؟ حول هذا الموضوع هنا: "روابط"(يفتح في نافذة جديدة).

2. رسمت في برنامج فوتوشوب صورة بيانيةنمط المنزلق "التلفاز"... دعها لا تكون أصلية ، لكنها مريحة للغاية.
الشيء الرئيسي هو أن حجم منطقة المشاهدة مطلوب اكثر قليلافي العرض والارتفاع من الرسومات المعدة.

قم بإنشاء إطار سلكي HTML + CSS لعرض الشرائح

الصور مكتوبة في كود HTML بالضبط في ذلك المكان حيث سيتم عرضها في المستقبل. يمكن كتابة النصوص لاحقًا في أي مكان مناسب. عادة ما أترك مساحة لهم أسفل الصور مباشرة. الهيكل أكثر منطقية.

وضع الصور نفسها داخل العلامة ص، والتي قمت بتعيين العرض والارتفاع لها في أنماط CSS ، وأشرت إليها class = "عرض الشرائح"... وتم وضع الفقرة نفسها معهم داخل العلامة العامة شعبة، على الخلفية التي علقت فيها الصورة الرسومية المعدة لشريط التمرير ( التلفاز*). أعطه فئة = "slider_fon".
وعلاوة على ذلك، فقط لأجله، لتفريغ الصفحة ، قمت بتوصيل ورقة أنماط خارجية وفعلت كل شيء للصور داخل كود HTML .

ملاحظة. **الإجراء الأخير على الإطلاق ليسبالضرورة. إنه فقط أنه أكثر ملاءمة بالنسبة لي. تبدو بنية الصفحة بطريقة ما أكثر منطقية.

في قواعد CSS المحددة بحجم النافذهللصور التي ستظهر بعد ذلك في شريط التمرير (عرض ارتفاع) ... بطبيعة الحال ، كل الصور يجب أن يكون بنفس الحجم.
اذا رغب، يمكن أن تتوسعخيارات CSS عن طريق إضافة الحدود والخلفيات والحشو وعناصر أخرى على سبيل المثال. ومع ذلك ، أعتقد أنه كان لا لزوم له.

إذا كنت تريد القيام بذلك ، فقم بالإشارة إلى الأبعاد بشكل عام ، أي: الصورة + ALL تعيين الهوامش والحدود.

ربط البرامج النصية

أوصي بزيارة صفحة الدليل التي قمت بإنشائها لنفسي أثناء التعرف على تقنية jQuery. سوف يساعدك على فهم الكثير.
فتحت لها الوصول العام: أخذ العينات في jQuery(يفتح في نافذة جديدة).

كما هو الحال دائمًا ، قمت أولاً بإنشاء مجلد js على الموقع. ثم قمت بتنزيل البرامج النصية لعرض الشرائح الضرورية ( أرشيف) ، وفك ضغطها في هذا المجلد. انتهى الأمر بملفي نصوص: النواة مسج 1.8.3.min.jsوالمكوِّن الإضافي jquery.cycle.all.min.js.

في ذلك ، فقط في حالة إضافة ملف التحكم الخاص بي myscripts11.js... ومع ذلك ، لم يكن من المفيد بالنسبة لي هنا إطلاق عرض شرائح وعرضه. هل هذا ، راجعتهم الاتصال الصحيحالمجلد الذي تم إنشاؤه.
لكن ...... فليكن. أنت لا تعرف أبدًا ما الذي أريد فعله في المستقبل باستخدام المنزلقات الموضوعة هنا. باختصار ، "... قطارنا المدرع دائمًا على المسار الجانبي".

أبعد. العلامة الداخلية … أدخلت الأسطر حيث كتبت مسارات البرامج النصية..jpg "type =" text / javascript ">وإلى المكوِّن الإضافي:.
ملف تحكم مخصص ("احتياطي") علق بها.

- وأخيرا -

أولئك الذين جاءوا إلى موقعي مع معاقفي المتصفح بواسطة المترجم جافا سكريبت، يراقب عرض الشرائح، بالطبع ، لا يمكنهم ذلك.
سيرون الرسومات كما وردت باللغة كود HTML، بمعنى آخر. في عمود واحدًا تلو الآخر.
لقد صنعت خط تحذير لهم وأدخلته في العلامة

حسنا! تم إنشاء عرض الشرائح. يبقى تعديل معلماته: سرعة تغيير الصور ، وكيفية عرضها ، وما إلى ذلك.

تكوين إعدادات عرض الشرائح

كما كتبت أعلاه ، (في ملاحظة **) ، لقد كتبت النصوص اللازمة مباشرة في كود HTML لهذه الصفحة نفسها.
في عرض الشرائح الذي أنشأته على موقع الويب الخاص بي ، قمت بتطبيق الإعدادات "إفتراضي".

بشكل عام ، من السهل تعيين أنواع مختلفة ومثيرة للاهتمام من الانتقالات بين الصور عن طريق التغيير جافا سكريبتوضعها في نص الصفحة.
دعنا نقول المتغيرةالخامس النصيخط تزامن:خاطئةتشغيل تزامن:حقيقية، يمكنك إزالة المساحة عند تغيير الصور.

ملاحظة مهمة!
إصدارات مختلفة مسجقد ليواجهمع بعضهم البعض إذا كانوا على نفس الصفحة.
تأكد من (!) للتحقق من عمل الملحقات مع نسخة مثبتة مسج، بقدر ما ليست كل الإصدارات متوافقة!

مثال**
في صفحات أخرى من القسم مسجباستخدام المكتبة يتم تثبيت الإصدار مسج v.1.10.1.min... لذلك ، فهو أكثر حداثة من الإصدار 1.8.3.min، من أي بصورة صحيحة (!)الشغل منزلقات عرض الشرائحهنا.

توصيل في jquery.cycle.all.min.jsمعها لا يعمل!!!
(تم التحقق)

ومع ذلك ، لا تنزعج. كل شيء بين يديك!
في قسم موقعي "مفيد"(يفتح في نافذة جديدة) ستجد تمت تجربتها واختبارها (!)مجموعة كاملة من البرامج النصية اللازمة لإنشاء عرض الشرائح هذا على موقعك. (مجانا، بالطبع!)

أنواع أخرى من عروض الشرائح

في هذا القسم الفرعي ، لن أصف بهذه التفاصيل جميع الخطوات اللازمة لإنشاء عرض شرائح. من حيث المبدأ ، هم بالضبط نفس الشيء.
أسهل. لا حاجة لرسم صورة خلفية المنزلق في Photoshop. حتى في منفصلطاولة أنماط CSSلن تحتاج.

إذا كنت تريد وضع خيارات عرض الشرائح المختلفة على واحدصفحة الموقع كما فعلت هنا ( انظر أدناه) ، حدد فئات مختلفة لكل خيار في سطر البرنامج النصي $(‘.slideshow') .دورة ((

ملاحظة. *لا تنس كتابتها في CSS أحجام النوافذ لكل فئةإذا كنت ، مع ذلك ، ستستخدم ورقة أنماط. لم أكن بحاجة إليه.

انظر أولاً إلى الصور الثابتة التي أخذتها بالمثل من الدورة التدريبية (أي واحدة؟ أكرر الرابط: "روابط") ، ونشرها هنا للمقارنة.

ها هم. المشاركون في المستقبل من 7 عروض شرائح!
انظر "أدائهم" أدناه.

سأعرض لك عدة أنواع شائعة من أشرطة التمرير. أدخلتها ، لسهولة المشاهدة ، في الجدول العام.
اليسار- اسم التأثير وشرح موجز ، إذا لزم الأمر. على اليمين- مثال.

أتمنى أن تكون قد استمتعت بعرض الشرائح "الجماعي" المعروض.
في الواقع ، إنه مناسب! منازل "الرقص" - كل في زنزانته ، ولا تتدخل مع أحد. لا عجب أنني أعطيتهم +5 مقابل "الأداء"!

لكن بجدية - هذه الطريقة في إنشاء عرض شرائح لموقع ويب تحفظ كمية كبيرةمن الأماكن على الصفحة.
لذلك أكرر ما قيل في بداية المقطع.
أكثر حل مثاليلإنشاء عروض مختلفة على الموقع - استخدم مسج.

بحث عملي استخدام أشرطة التمرير لتصميم صفحات الموارد ، يمكنك ذلك على موقع بطاقة عمل تم إنشاؤه خصيصًا من قبلي "صفحة شخصية".

هل من الممكن القيام بشيء كهذا دون تضمين نصوص؟
بالتأكيد! اقرأ لتفاصيل أكثر.

عرض الشرائح بتنسيق HTML فقط

كيفية إنشاء شريط تمرير بسيط على الموقع حتى لا يتم تطبيقه معقدًا وثقيلًا مختلفًا (بالوزن")نصوص؟ بسهولة!
لن أكون كذلك لولا أن أريكم مثل هذه الطرق الممتعة والبسيطة!

سوف نستخدم لهذا التقنيات الأساسية إنترنت => HTML + CSS.

أساسي- يعني أولئك الذين بدونهم الإنترنت مستحيل على الإطلاق ، من حيث المبدأ!

ومع ذلك ، تحقق من عروض الشرائح البسيطة التي تم إنشاؤها باللغة فقط أولاً. لغة البرمجة، دون استخدام أي نصوص.
لقد صنعت صفحة صغيرة منفصلة خاصة لهذا الغرض.

بعد ذلك ، ستكون قادرًا على تحديد ما هو أكثر ملاءمة لمواردك.

استنتاج

آمل أن تكون المعلومات المنشورة حول كيفية إنشاء عرض شرائح للموقع مثيرة للاهتمام بالنسبة لك.
في نفس الوقت ، وله "ملف"نشر ما يكفي من المواد حول هذا الموضوع الرائع.

بالنسبة للزوار الذين يحتاجون إلى إنشاء عرض شرائح أو معرض على الموقع ، قم بتوصيل الصوت والفيديو به ، ولكن ليس لديهم الوقت للقيام بذلك بمفردهم ، يمكن أن يساعد القسم "اختيار الفنان"(يفتح في نافذة جديدة).

قمت بزيارة مباشرة لهذه الصفحة من ثلاثة كبيرةأقسام. يمكنك أيضا العودة مباشرة. حرك مؤشر الماوس فوق الأسهم - ستظهر تلميحات إلى حيث تؤدي.
من خلال النقر على القمة شعار، سوف تصل إلى "الرئيسية".

منزلق بسيط وخفيف الوزن (مضغوط 21 كيلو بايت) مكتوب بلغة جافا سكريبت خالصة ، دون أي تبعيات ، على سبيل المثال

صانع عرض الشرائح HTML5

يعمل بدون مسج.

تم اختباره في المتصفحات التالية:

• Chrome 26.0
• فايرفوكس 20.0
• سفاري 5.1.7
• أي 10
• أوبرا 16.0

لا يوجد دعم كامل لـ IE8 / 9 (لا توجد تأثيرات).

جيثب | تجريبي

الخصائص

• يمكنك إضافة عدد غير محدود من أشرطة التمرير إلى الصفحة ، حتى وضع أحدهما داخل الآخر.
• يتم تغيير الحجم بناءً على المحتوى ، ولكن يمكن تعطيله.
• التنقل بلوحة المفاتيح - عندما يكون المؤشر على شريط التمرير ، يمكنك تبديل منزلقات الأسهم.
• دعم أحداث اللمس المحمول.

اتصال

قبل علامة الإغلاق ، تحتاج إلى الاتصال slidr.jsأو slidr.min.jsملف.

ترميز HTML

slidr.jsيمكن أن تعمل مع أي عناصر لها سمة. يُسمح باستخدام أي عناصر فرعية من المستوى الأول مع سمة ، على سبيل المثال:

جافا سكريبت

بعد الاتصال slidr.jsسيصبح الكائن العام متاحًا. أسهل طريقة للإنشاء:

الاتصال بجميع الإعدادات:

إعدادات

جميع الإعدادات المتاحة لـ slidr.js موضحة في الجدول أدناه.

معامل	نوع من	تقصير	وصف
وظيفة	وظيفة رد الاتصال بعد تغيير الشريحة
وظيفة	وظيفة رد الاتصال قبل تغيير الشريحة
منطقي	خاطئة	عرض فتات الخبز للتحكم في الشرائح. أو.
سلسلة	الحدود	ترتيب الأسهم للتحكم في الشرائح. ، أو.
سلسلة	عرضي	الاتجاه الافتراضي للشرائح الجديدة. او او.
منطقي	حقيقية	تفعيل تأثير التلاشي / التدريجي. أو.
منطقي	خاطئة	قم بتمكين تغيير الشرائح باستخدام لوحة المفاتيح. أو.
منطقي	خاطئة	تمكين تجاوز لكتلة شريط التمرير. أو.
منطقي	خاطئة	لا تقم بتغيير الشرائح تلقائيًا عند تمرير الماوس (تحتاج إلى تشغيل تلقائي ()). أو.
سلسلة	#fff	لون عناصر تحكم شريط التمرير (فتات الخبز والأسهم). أو.
موضوع	{}	توقيت الرسوم المتحركة المخصصة للتطبيق. ...
منطقي	خاطئة	تفعيل التحكم باللمس أجهزة محمولة... أو.
سلسلة	خطي	تأثير انتقال الشرائح. ، أو.

وظائف رد الاتصال واستلام البيانات التالية:

Slider.js API العالمية

توفر مساحة الاسم العمومية slidr الوظائف التالية:

المنزلق API

دخول قصير

يتم عرض القائمة الكاملة لوظائف Slidr.js API أدناه.

التمرير في الصفحة أثناء تغيير الشرائح

يظهر هذا الخطأ الشرير في بعض المتصفحات. لإصلاحها تحتاج إلى إضافة نمط إلى:

تغيير الحجم الديناميكي

Slidr "يفهم" ما إذا كان المنزلق بحاجة إلى تغيير حجمه ليلائم الصورة. إذا كانت كتلة شريط التمرير ذات أبعاد محددة ، فلن يقوم Slidr بتغييرها تلقائيًا. إذا تم تحديد خصائص min-width و min-height ، فسيتم تغيير حجم شريط التمرير ليناسب المحتوى ، مع مراعاة هذه القيم. خلاف ذلك ، سيتم إجراء تغيير الحجم تلقائيًا.

تغيير الحجم تلقائيًا

أبعاد ثابتة

ضوابط Slidr

فيما يلي ترميز عناصر التحكم:

يمكنك تخصيص أي عنصر تحكم في شريط التمرير باستخدام محددات CSS:

يتم تنفيذ التحكم في السهم باستخدام محدد زائف ، لذلك لإخفائه ، استخدم الكود التالي:

فتات الخبز سلايدر

فتات الخبز لها HTML عاديوضع علامة على. يشير كل منها إلى سطر كامل ، ويشير كل منها إلى مسار تنقل منفصل:

تصميم فتات الخبز باستخدام CSS:

رخصة

هو - هي البرمجياتيمكن استخدامها بحرية بموجب ترخيص MIT.

العلامات: جافا سكريبت

شريط تمرير بسيط بجافا سكريبت خالص

منزلق جافا سكريبت نقي

نص الفيديو

• 
  
  


• 
  
  


• 
  
  

#slider (موضع: نسبي ؛ تجاوز: مخفي ؛ عرض: 600 بكسل ؛ ارتفاع: 320 بكسل ؛ الهامش: 20 بكسل تلقائي ؛ الحشو: 0 ؛ نمط القائمة: لا شيء ؛)
.slide (الموضع: مطلق ؛ العرض: 100٪ ؛ الارتفاع: 100٪ ؛ الانتقال: كل 1 ثانية سهلة في 0.1 ثانية ؛ يسار: 0 ؛)
.slide img (العرض: 100٪ ؛)
.arrows (الموقف: نسبي ؛ الهامش: 0 تلقائي ؛ العرض: 600 بكسل ؛)
.arrow (الموقف: مطلق ؛ المؤشر: المؤشر ؛)
. no_active (اللون: أحمر ؛)
.next (يمين: 0 ؛)

نص Js:

var next = document.getElementById ("next") ؛
var prew = document.getElementById ("prew") ؛

var slides = document.getElementsByClassName ("slide")؛
لـ (var i = 0 ؛ i

عد إلى القائمة

جغرافيًا ، أنا موجود في سانت بطرسبرغ ، لكن يمكنني العمل مع الجميع ، بغض النظر عن موقعك ، وأنا مستعد لذلك.

مختبر ضوئي

يمكنك الكتابة لي من خلال النموذج استجابة، أو الاتصال عبر الشبكات الاجتماعية... يمكنك عرض المحفظة هنا وهنا.

تحياتي أيها الأصدقاء الأعزاء!

101 منزلق وعرض شرائح لموقع ويب باستخدام Jquery CSS - رائع ، رائع!

في هذا البرنامج التعليمي القصير ، سأوضح لك كيف يمكنك ذلك بطريقة بسيطةإنشاء عرض الشرائح!

عرض الشرائح هو معرض جافا سكريبت تتغير فيه الصور تلقائيًا بعد فترة زمنية معينة.

في معرض الصور الخاص بنا ، عند تغيير الصورة ، سنستخدم تأثيرًا صغيرًا ، أي تغيير شفافية الصورة!

كود Html بسيط:

كل شيء بسيط للغاية هنا - ضع الصورة الأولى في القالب مع فئة عرض الشرائح.

وهنا ، في الواقع ، هي أنماط الفئة أعلاه:

اضبط العرض ووسط الكتلة.

الآن دعنا نلقي نظرة فاحصة ونحلل كود جافا سكريبت (Jquery):

أولاً ، يتم وصف image_array الذي يحتوي على روابط للصور.

إذا كنت بحاجة إلى إضافة صور المعرض أو إزالتها أو تغييرها ، فما عليك سوى استبدال الروابط الموجودة في هذه المجموعة - لا يلزم تغيير أي شيء آخر!

يتم استخدام المتغير image_num كمقياس للصور. عندما نصل إلى الصورة الأخيرة للمصفوفة ، نقوم بتعيين هذا المتغير على صفر لبدء العرض مرة أخرى من الصورة الأولى (نقوم بعمل حلقة).

1. التقاط صورة من كتلة مع فئة عرض الشرائح ؛
2. اجعلها شفافة بنسبة 40٪ (يحدث هذا في 500 مللي ثانية) ؛
3. بعد ذلك نقوم بتغيير سمة src الخاصة بالصورة (نقوم بتغيير الرابط إلى الصورة ، ونأخذها من مصفوفة image_array) ؛
4. ثم نجعل الصورة معتمة (يحدث هذا أيضًا في 500 مللي ثانية).

كما قلت سابقًا ، فإن المتغير image_num عبارة عن عداد ، نقارنه بطول المصفوفة (أي بعدد الصور المشاركة في عرض الشرائح) وإذا كانت image_num تساوي القيمة القصوى ، فسنقوم بإعادة تعيينها .

تعمل وظيفة الشريحة كل 3 ثوانٍ (3000 مللي ثانية) باستخدام فاصل زمني (setInterval) ، مما يعني أنه سيتم قلب الصور كل 3 ثوانٍ.

كما ترى ، لا يوجد شيء معقد!

في هذه المرحلة ، انتهى هذا الدرس حول جافا سكريبت ، والآن يمكنك إلقاء نظرة على المثال التوضيحي ، وقول أيضًا الملف الأصليدرس.

هذا كل شيء ، حتى دروس جديدة ، وداعا!

إذا كنت بحاجة إلى مساعدة في إنشاء أي وظيفة أو موقع ويب أو خدمة أو اختبارات أو آلات حاسبة ، فأنا على استعداد للمساعدة ، بمزيد من التفاصيل في صفحة الخدمات.

نظرة عامة على برنامج عرض الشرائح

إنشاء عرض شرائح لموقع ويب

عند إنشاء عروض شرائح للنشر على الموقع ، من الأفضل استخدام المنتجات الجاهزة حلول البرمجيات... في رأيي ، الخيار الأفضل والأسهل هو الاستخدام jQuery ،مكتبة نصوص مجانية خاصة (برامج صغيرة على جافا سكريبت). لقد غطت المقالات السابقة بالفعل أداة تطوير الويب الرائعة هذه. على سبيل المثال ، راجع مقالة معرض الصور مسج- بسيط و جميل! ... الآن دعنا نطبق مسجلإنشاء عرض شرائح على الموقع ، يسمى شريط التمرير.

للقيام بذلك ، سوف نستخدم الملحق الشرائحتم إنشاؤه بواسطة المبرمج ناثان سيرلز ، كبير موظفي التكنولوجيا في استوديو تصميم The Brigade في بورتلاند ، أوريغون ، الولايات المتحدة الأمريكية. تم وصف تطورها الآخر في مقال Photogallery لمتجر عبر الإنترنت.

توصيل في الشرائح- سهل التثبيت ، وله العديد من الخيارات لتغيير الصور في عرض الشرائح وغالبًا ما يستخدم لرأس الموقع. يظهر مثال على كيفية عمل شريط التمرير هذا مع الإعدادات الافتراضية في الشكل:

تثبيت عرض الشرائح الشرائح

كما هو الحال دائمًا ، قم أولاً بإنشاء مجلد نصوصفي الموقع. ثم تحتاج إلى تنزيل الأرشيف وفك ضغطه في المجلد الذي تم إنشاؤه. سيكون لها نصين مسج 1.8.3.min.jsو jquery.cycle.all.min.js.

بعد ذلك ، في عنوان الصفحة داخل العلامة ... إدراج الأسطر التالية حيث يكون المسار إلى البرامج النصية الصغيرة جافا سكريبتتحديد معلمات عرض الشرائح:

كما ترى ، هناك أيضًا قاعدة CSS بسيطة تحتاج فيها إلى تحديد حجم النافذة لصور عرض الشرائح في المستقبل (العرض - الارتفاع). بطبيعة الحال ، يجب أن تكون جميع الصور بنفس الحجم. اختياريًا ، يمكنك توسيع معلمات CSS عن طريق إضافة ، على سبيل المثال ، الحدود والخلفيات والحشو وعناصر أخرى لصور عرض الشرائح. في هذه الحالة ، يجب تحديد الحجم بشكل عام ، أي الصورة بالإضافة إلى المسافات البادئة والحدود التي تحددها في الطول والعرض.

ملاحظة مهمة: إذا كان موقعك يستخدم مكونات إضافية متعددة مسج، يكون نقل ملف jquery.js أكثر ملاءمة (ويفضل أن يكون احدث اصدار) الخامس المجلد الرئيسيلتجنب تنزيله عدة مرات. في هذه الحالة ، سيبدو الخط المرجعي له كما هو بالنسبة لجميع المكونات الإضافية. على وجه الخصوص ، على سبيل المثال لدينا ، اتضح مثل هذا:

لا ينصح باستخدام عدة إصدارات مختلفة مسجحتى لا يتعارضوا مع بعضهم البعض. في هذه الحالة ، تأكد من التحقق من عمل المكونات الإضافية مع الإصدار المثبت مسجنظرًا لأنه ليست كل الإصدارات قابلة للتبديل.

اخر خطوة- وضع الصور على الصفحة. هنا أيضًا ، كل شيء بسيط. ضع الصور داخل العلامة