Галерия с автоматично сменящи се картинки + линк
Ще ви покажа как да си направите галерия при която картинките се сменят
автоматично и зад всяка картинка се крие линк. :)

Източник е javascriptkit


Ето и кода.Съдържа 3 картинки.
Ако искате да добавите още си правите..

ultimateshow[3]=['картинка.jpg', 'линк (url адрес)']
ultimateshow[4]=['картинка.jpg', 'линк (url адрес)']
ultimateshow[5]=['картинка.jpg', 'линк (url адрес)']

И така нататъка :)


<script type="text/javascript">


var ultimateshow=new Array()

//ultimateshow[x]=["Папка с картинките", "OPTIONAL link for image", "OPTIONAL link target"]

ultimateshow[0]=['картинка.jpg', 'линк (url адрес)']
ultimateshow[1]=['картинка.jpg', 'линк (url адрес)']
ultimateshow[2]=['картинка.jpg', 'линк (url адрес)']

//Настройка на картинките

var slidewidth="едисиколко px" //Дължина по width
var slideheight="едисиколко px" //Дължина по height
var slidecycles="3" //Номер на картинка при която да спре ротацията
var randomorder="no" //Повтаряне на картинките "yes" или "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'

//Скорост на ротация на картинките (в милисекунди)
var slidedelay=3000

////Тук не променяйте нищо////////////////

var ie=document.all
var dom=document.getElementById
var curcycle=0

if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}

var currentslide=0

function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}

if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow

function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}

if (ie||dom)
window.onload=start_slider

</script>



Демо за сега няма. :)

edit: тук може да видите демо http://www.javascriptkit.com/script/script2/flexibleslide.shtml


/ Трябва да сте регистриран за да напишете коментар /