طراحی سایت و اسلایدشو با جاوا اسکریپ

اسلایدشو امکان گرافیکی در اغلب طراحی سایت ها می باشد و با جذب نظر کاربر در سئو موثر می باشد.

نمایش اسلایدشو از قابلیت هایی است که در اغلب طراحی سایت ها اعمال می شود. درج اسلایدشو به منظور نمایش محصولات و خدمات در اغلب طراحی وب سایت ها مورد کاربرد قرار می گیرد. افزونه های بسیاری بدین منظور وجود دارد که به شما این امکان را می دهد که اسلایدشویی از مطالب مورد نظر خود را در طراحی سایت ایجاد نمایید. نمایش اسلایدشو به دلیل ظاهر گرافیکی موجب جلب توجه کاربران سایت شما به محصولات و خدمات شما می شود بدین واسط فراهم نمودن اسلایدشو با نمای گرافیکی زیبا تاثیر موجب جذب کاربر و ترافیک به سمت وب سایت شما می شود که در سئو سایت شما اثرگذار خواهد بود. استفاده از اسکریپ های جاوا این امکان را به شما می دهد که اسلایدشویی مطابق نظر خود را در طراحی سایت خود پیاده سازی نماید. در اینجا قصد داریم کدهایی که بدین منظور می بایست در طراحی سایت خود درج نمایید را بیان نماییم.

#slideshowContainer{

width: 300px;

height: auto;

}

#numberDiv a{

font: bold 14px Arial;

text-decoration: none;

}

#backforthbuttons{

margin-top: 6px;

}

</style>

// Index It Image Slideshow script- By JavaScriptKit.com

// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/

// This notice must stay intact for use

//Specify images for slideshow:

//["Image Path", "Optional Image link"]

var numberslide=new Array()

numberslide[0]=["plane1.gif", "http://www.google.com"]

numberslide[1]=["plane2.gif", ""]

numberslide[2]=["plane3.gif", ""]

numberslide[3]=["plane4.gif", ""]

numberslide[4]=["plane5.gif", ""]

var mylinktarget="" //specify optional link target

var mylinkcolor="navy" //specify default color of number links

var mylinkcolorSelected="red" //specify color of selected links

var imgborderwidth=0 //specify border of image slideshow

/////Stop customizing here////////////////

var preloadit=new Array()

for (i=0;i<numberslide.length;i++){

preloadit[i]=new Image()

preloadit[i].src=numberslide[i][0]

}

var currentindex=""

function changeslides(which){

var imghtml=""

currentindex=(which=="initial")? 0 : parseInt(which)

var mode=(which=="initial")? "initial" : ""

var which=(mode=="initial")? numberslide[0] : numberslide[which]

if (which[1]!="")

imghtml='<a href="'+which[1]+'" target="'+mylinktarget+'">'

imghtml+='<img src="'+which[0]+'" border="'+imgborderwidth+'">'

if (which[1]!="")

imghtml+='</a>'

if (mode=="initial")

document.write('<div>'+imghtml+'</div>')

else{

document.getElementById("imagecontainer").innerHTML=imghtml

changecolors()

}

function createnumbers(){

document.write('<a href="javascript:changeslides(0)" style="color:'+mylinkcolorSelected+'">0</a> ')

for (i=1; i< numberslide.length; i++)

document.write('<a href="javascript:changeslides(\''+i+'\')">'+i+'</a> ')

}

function changecolors(){

var numberobj=document.getElementById("numberDiv")

numberlinks=numberobj.getElementsByTagName("A")

for (i=0; i<=currentindex; i++)

numberlinks[i].style.color=mylinkcolorSelected

for (i=currentindex+1; i<numberslide.length; i++)

numberlinks[i].style.color=mylinkcolor

}

function goforward(){

if (currentindex<numberslide.length-1)

changeslides(currentindex+1)

}

function goback(){

if (currentindex!=0)

changeslides(currentindex-1)

}

</script>

کدهای css و اسکریپ ها را در تگ <head> صفحه سایت درج نمایید. حال قطعه کد زیر را در بخشی از صفحه طراحی سایت خود که قصد نمایش اسلایدشو را دارید درج نمایید.

changeslides("initial") //This call displays the first image

</script>

</div>

createnumbers() //This call writes out the numbers

</script>

</div>

</div>

<p style="font: normal 11px Arial">This free script provided by<br />

<a href="http://www.javascriptkit.com">JavaScript Kit</a></p>

</div>

با آسانی با درج کدهای زیر شما در صفحه سایت خود اسلایدشویی از محصولات خود را خواهید داشت.

نمایش اسلایدشو از قابلیت هایی است که در اغلب طراحی سایت ها اعمال می شود. درج اسلایدشو به منظور نمایش محصولات در اغلب طراحی وب سایت ها می باشد. اسلایدشو موجب جذب کاربر و ترافیک به سمت وب سایت می شود که در cاثرگذار خواهد بود.