طريقة عمل شرائح للصور بشكل جذاب

مواضيع ذات صلة

كتبه: karwanpro / بتاريخ: 2013-07-19 , هه‌ینی

اصبح السلايد شو من الامور التي لا غنى عنها في المواقع والمدونات فالكل يهتم به غاية في الاهتمام وهذا يدل على مدى اهميته بالنسبة لاصحاب المواقع من خلال تزين جزء من الموقع وغالبا ما تكون اعلى التدوينات في الصفحة الرئيسية وبالتالي جلب المزيد من الزوار الى الموقع لانها تدل على مدى اهتمام صاحب الموقع الموقع لذلك لابد لنا ان نتعلم هذه التقنية لكي ننشئها بانفسنا لا نظل ان نقوم بتعريب السكربتات مليئة بالاخطاء والنقص وما الى ذلك , ففي هذا الدرس سوف نتعلم كيفية انشاء شرائح الصور بطريقة سلايد شو

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

Code

timer:function(s){s.onmouseover=function(){clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(s)},t)}},

لاحظ اننا لم نضع اي وقت كعدد وانما متغيرات وذلك لاننا سنظعه في الصفحة الرئيسية للكربت.
اما الان سنكتب الكود المسؤل عن انشاء السلايد شو والتي تتضمن ترتيب الصور وتكوين السلايد شو وتكون كالاتي

Code

  build:function(sm,sw,mt,s,sl,h){
  sp=s; st=sw; t=mt;
  m=document.getElementById(sm);
  sa=m.getElementsByTagName('li');
  l=sa.length; w=m.offsetWidth; sw=w/l;
  ot=Math.floor((w-st)/(l-1)); var i=0;
  for(i;i<l;i++){s=sa[i]; s.style.width=sw+'px'; this.timer(s)}
  if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}
  },

بعدها نكتب الكود المسؤل عن ابعاد الصور والتي تكون كالاتي

Code

slide:function(s){
  var cw=parseInt(s.style.width,'10');
  if(cw<st){
  var owt=0; var i=0;
  for(i;i<l;i++){
  if(sa[i]!=s){
  var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width,'10');
  if(ow>ot){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+'px'}
  owt=owt+(ow-oi)}}
  s.style.width=(w-owt)+'px';
  }else{clearInterval(m.timer)}
  }

وبعدها نقوم بدمج الاكواد واضافة التنسسيق للاكواد والتي ستجده بالكامل في الملف المرفق بعدما تقوم بتنزيله
انشاء الملف CSS
كما تعلمون بان ملف css هو فقط لتكوين الالوان والابعاد لذلك لا نتكلم عنه كثيرا ويمكن لاي شخص ان يضع الكود المناسب له ولكن اكتفي بوضع اكواد الضرورية فقط وهو كالاتي

Code

* {margin:0px 2px 0px 0px; padding:0}
.sm {list-style:none; width:1100px; height:400px; display:block; overflow:hidden;}
.sm li {float:left; display:inline; overflow:hidden;}

كما ترون بسيطة وخفيفة لا يحتاج الى تعقيد
انشاء الكود في الصفحة الرئيسية
الان تبقى لدينا فقط وضع كود في الصفحة الرئيسية لتضهر السلايد شو كما خططنا له وتكون كود بسيط جدا وهو كالاتي

Code

كما ترون انها فقط ساسلة من الصور بروابطه فقط وتستطيع وضع رابط لهم ان اردت.
انتهى الدرس واتمنى ان تستفيدوا منه ولا تتهاونوا في كتابة ارائكم . ودمتم

مشاهدة المشروع | تنزيل المشروع

865 عدد المشاهدات