|
مجتمع uCoz العربي للدعم والمساعدة اصحاب المواقع والويب ماسترز اكواد وحلول HTML كود slideshow للصور جديد ومرن ومبسط |
كود slideshow للصور جديد ومرن ومبسط |
بسم الله الرحمن الرحيم هذا الكود يعرض الصور بشكل سلس ومتتالي بدون تدخل منك .. ويعطي المزيد من الأناقة لموقعك ويميز هذا الكود أنه لا يتعارض مع internet explorer ولا يتطلب الكثير من الخطوات ولا يحتاج الى ملف java script .. فقط كل ما عليك نسخ الكود ووضعه في المكان الذي تريد أن يظهر فيه الـ slide show . يمكنك رؤيته في هذا الموقع كمثال . الكود:> Code <script type="text/javascript"> //Specify the slider's width (in pixels) var sliderwidth="703px" //Specify the slider's height var sliderheight="246px" //Specify the slider's slide speed (larger is faster 1-10) var slidespeed=3 //configure background color: slidebgcolor="#EAEAEA" //Specify the slider's images var leftrightslide=new Array() var finalslide='' leftrightslide[0]='<a><img src="/im1.jpg" border=1></a>' leftrightslide[1]='<a><img src="/im2.jpg" border=1></a>' leftrightslide[2]='<a><img src="/im3.jpg" border=1></a>' //Specify gap between each image (use HTML): var imagegap=" " //Specify pixels gap between each slideshow rotation (use integer): var slideshowgap=5 ////NO NEED TO EDIT BELOW THIS LINE//////////// var copyspeed=slidespeed leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>' var iedom=document.all||document.getElementById if (iedom) document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>') var actualwidth='' var cross_slide, ns_slide function fillup(){ if (iedom){ cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2 cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3 cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth cross_slide2.style.left=actualwidth+slideshowgap+"px" } else if (document.layers){ ns_slide=document.ns_slidemenu.document.ns_slidemenu2 ns_slide2=document.ns_slidemenu.document.ns_slidemenu3 ns_slide.document.write(leftrightslide) ns_slide.document.close() actualwidth=ns_slide.document.width ns_slide2.left=actualwidth+slideshowgap ns_slide2.document.write(leftrightslide) ns_slide2.document.close() } lefttime=setInterval("slideleft()",30) } window.onload=fillup function slideleft(){ if (iedom){ if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8)) cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px" else cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px" if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8)) cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px" else cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px" } else if (document.layers){ if (ns_slide.left>(actualwidth*(-1)+8)) ns_slide.left-=copyspeed else ns_slide.left=ns_slide2.left+actualwidth+slideshowgap if (ns_slide2.left>(actualwidth*(-1)+8)) ns_slide2.left-=copyspeed else ns_slide2.left=ns_slide.left+actualwidth+slideshowgap } } if (iedom||document.layers){ with (document){ document.write('<table border="0" cellspacing="0" cellpadding="0"><td>') if (iedom){ write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">') write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">') write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>') write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>') write('</div></div>') } else if (document.layers){ write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>') write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>') write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>') write('</ilayer>') } document.write('</td></table>') } } </script> تستطيع تحديد أبعاد الـ slide show من ... sliderwidth - sliderheight ووضع الصور الخاصة بك بدل im1.jpg - im2.jpg - im3.jpg شكراً تمت الإضافة (13.07.2012, 15:41) Code leftrightslide[0]='<a href="ضع رابط الموقع هنا"><img src="ضع رابط الصورة هنا" border=1></a>' وتحديد سرعة حركة الصورة من هنا var slidespeed=3 |
ahansaary, بالنسبة للسلايد شو فهو رائع...لكن الاروع ان تتم العملية بشكل تلقائى ويظهر كل ما هو جديد فى الموقع دون الحاجة الى اى شغل يدوى..
|
بسراحة تسلم ايدك كود روعة
|
| |||
| |||