elham1388
December 27th, 2014, 12:06
نمایش اسلایدشو از قابلیت هایی است که در اغلب طراحی سایت ها اعمال می شود. درج اسلایدشو به منظور نمایش محصولات و خدمات در اغلب طراحی وب سایت ها مورد کاربرد قرار می گیرد. افزونه های بسیاری بدین منظور وجود دارد که به شما این امکان را می دهد که اسلایدشویی از مطالب مورد نظر خود را در طراحی سایت ایجاد نمایید. نمایش اسلایدشو به دلیل ظاهر گرافیکی موجب جلب توجه کاربران سایت شما به محصولات و خدمات شما می شود بدین واسط فراهم نمودن اسلایدشو با نمای گرافیکی زیبا تاثیر موجب جذب کاربر و ترافیک به سمت وب سایت شما می شود که در سئو سایت شما اثرگذار خواهد بود. استفاده از اسکریپ های جاوا این امکان را به شما می دهد که اسلایدشویی مطابق نظر خود را در طراحی سایت خود پیاده سازی نماید. در اینجا قصد داریم کدهایی که بدین منظور می بایست در طراحی سایت خود درج نمایید را بیان نماییم.
<style type="text/css">
#slideshowContainer{
width: 300px;
height: auto;
}
#numberDiv a{
font: bold 14px Arial;
text-decoration: none;
}
#backforthbuttons{
margin-top: 6px;
}
</style>
<script type="text/j-avascript">
// Index It Image Slideshow script- By JavaScriptKit.com
// For this and over 400+ free scripts, visit JavaScript Kit- JavaScript Kit- Your comprehensive JavaScript, DHTML, CSS, and Ajax stop (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> صفحه سایت درج نمایید. حال قطعه کد زیر را در بخشی از صفحه طراحی سایت خود که قصد نمایش اسلایدشو را دارید درج نمایید.
<div id="slideshowContainer">
<div id="imagecontainer">
<script type="text/j-avascript">
changeslides("initial") //This call displays the first image
</script>
</div>
<div id="numberDiv">
<script type="text/j-avascript">
createnumbers() //This call writes out the numbers
</script>
</div>
<div id="backforthbuttons">
<a href="javascript:goforward()" style="float: right"><img src="/demo/blueright.gif" border="0"></a> <a href="javascript:goback()"><img src="/demo/blueleft.gif" border="0"></a>
</div>
<p style="font: normal 11px Arial">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript Kit</a></p>
</div>
با آسانی با درج کدهای زیر شما در صفحه سایت خود اسلایدشویی از محصولات خود را خواهید داشت.
منبع: شرکت طراحی سایت (http://www.npco.net)
<style type="text/css">
#slideshowContainer{
width: 300px;
height: auto;
}
#numberDiv a{
font: bold 14px Arial;
text-decoration: none;
}
#backforthbuttons{
margin-top: 6px;
}
</style>
<script type="text/j-avascript">
// Index It Image Slideshow script- By JavaScriptKit.com
// For this and over 400+ free scripts, visit JavaScript Kit- JavaScript Kit- Your comprehensive JavaScript, DHTML, CSS, and Ajax stop (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> صفحه سایت درج نمایید. حال قطعه کد زیر را در بخشی از صفحه طراحی سایت خود که قصد نمایش اسلایدشو را دارید درج نمایید.
<div id="slideshowContainer">
<div id="imagecontainer">
<script type="text/j-avascript">
changeslides("initial") //This call displays the first image
</script>
</div>
<div id="numberDiv">
<script type="text/j-avascript">
createnumbers() //This call writes out the numbers
</script>
</div>
<div id="backforthbuttons">
<a href="javascript:goforward()" style="float: right"><img src="/demo/blueright.gif" border="0"></a> <a href="javascript:goback()"><img src="/demo/blueleft.gif" border="0"></a>
</div>
<p style="font: normal 11px Arial">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript Kit</a></p>
</div>
با آسانی با درج کدهای زیر شما در صفحه سایت خود اسلایدشویی از محصولات خود را خواهید داشت.
منبع: شرکت طراحی سایت (http://www.npco.net)