des-org صاحب الموقع
الجنس : مشآرڪآتي: : 1939 نقآطيّ ›› *: : 4397 عدد التقييم : 21 تاريخ التسجيل : 23/10/2012 العمر : 27 المزاج : رايقه
| موضوع: كود سلايد شو احترافي وبسيط لاحلى منتدى الجمعة نوفمبر 13, 2015 8:52 am | |
| بسم الله الرحمن الرحيم .. نقدم لكم اليوم كود حصري علي منتديات منظمة الصحراء لصنع سلايدر شو احترافي وسهل التركيب بمييزات روعة بحجم كبير .. صورة للسلايدر شو الكود - الكود:
-
[center]<style>[/center] [font=monospace] #mcis { display: none;} #sliderFrame { background:#222; margin: 2px auto 20px; padding: 20px 20px 28px; position: relative; width: 620px; } #slider img { position: absolute; border: none; display: none; } #slider { width: 620px; height: 350px; background: #fff url(https://lh6.googleusercontent.com/-TghMlE2NjrY/U0ZhaCofIVI/AAAAAAAADuE/Y3WD45mnRDU/s32/preview.gif) no-repeat 50% 50%; position: relative; margin: 0 auto; } #slider a.imgLink { z-index: 2; display: none; position: absolute; top: 0px; left: 0px; border: 0; padding: 0; margin: 0; width: 100%; height: 100%; } div.mc-caption-bg, div.mc-caption-bg2 { position: absolute; width: 100%; height: auto; padding: 0; left: 0px; bottom: 0px; z-index: 3; overflow: hidden; font-size: 0; } div.mc-caption-bg {background-color: black;} div.mc-caption { background: url("https://lh5.googleusercontent.com/-lafTQRfuog0/U0EsxD_XSMI/AAAAAAAADr4/16mJJ7Ssx_0/s28/backslide.png") repeat scroll 0 0 rgba(0, 0, 0, 0); color: #EEEEEE; font: bold 15px/30px tahoma; padding: 10px 0; text-align: center; z-index: 4; } div.mc-caption a { color: #FB0;} div.mc-caption a:hover { color: #DA0;} div.navBulletsWrapper { top:350px; background: none; position: relative; z-index: 5; cursor: pointer; } div.navBulletsWrapper div{ background:#ccc; cursor: pointer; float: right; height: 9px; margin-left: 1px; overflow: hidden; vertical-align: middle; width: 87px; } div.navBulletsWrapper div.active { background:#1980E6;} #slider { transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } </style> <script src="https://cnmu.googlecode.com/svn/trunk/cnmuslid.js" type="text/javascript"></script>
<div id="sliderFrame"> <div id="slider"> <a href="#"><img src="i#" alt="عنوان الموضوع"/></a> <a href="#"><img src="i#" alt="عنوان الموضوع"/></a> <a href="#"><img src="i#" alt="عنوان الموضوع"/></a> <a href="#"><img src="i#" alt="عنوان الموضوع"/></a> <a href="#"><img src="i#" alt="عنوان الموضوع"/></a> <a href="#"><img src="i#" alt="عنوان الموضوع"/></a> </div></div>[/font] شرح التعديل على السلايدر شو
الرقم 620 هو عرض السلايدر عدله في المرتين الرقم 350 هو الإرتفاع عدله أيضاً في المرتين هذا #1980E6 هو لون السلايدر النشط
الإستخدام استبدل i# برابط الصورة بالمقاس المناسب الذي اخترته لعرض وارتفاع السلايدر استبدل رمز # بالرابط الذي تريده ان يظهر عند الضغط على الصورة اما كلمة عنوان الموضوع استبدلها بعنوان مناسب انت لديك 7 سطور كل سطر يساوي صورة في السلايدر , يمكنك الحذف او يمكنك تكرار الكود دة - الكود:
-
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a> لتحصل على صور جديدة في حالة الزيادة او النقصان شريط التنقل السفلي لن يكون مظهره مضبوط لذلك عدل الرقم 87 ان زدت الصور قم بتقليل الرقم حتى تصغر مساحة ازرار التنقل وتستوعب الصور الجديدة دون تشوه اما ان قللت عدد الصور زد الرقم حتى تتسع الازرار وتكون بمظهر مناسب
يوضع الكود فى اى مكان يقبل HTML | |
|