Hvordan lage bilder Move On My webside

En enkel måte å bringe bildene liv på nettstedet ditt er å legge til en lysbildefremvisning. En lysbildefremvisning får bildene til å flytte sammen på nettsiden i stedet for gjenværende stasjonær. For å legge til bevegelige bilder til nettstedet ditt, må du legge inn riktig kode. Det er tredjeparts nettsteder, for eksempel Slide, Flickr og Photoshow som vil gi ditt med lysbildefremvisning koder. Ulempen med å bruke slike nettsteder er at deres reklame vil bli vist til de som ser bildene dine. Ved å lage din egen HTML-kode du ikke trenger å bekymre deg for tredjeparts annonser.

Bruksanvisning

1 Logg inn på kontrollpanelet ditt nettsted.

2 Åpne nettstedets "File Directory." Kontroller at alle bildene du vil flytte på siden din har blitt lastet opp i katalogen. Avhengig av ditt nettsted vert, kan det være en spesiell "Media" eller "Bilder" -mappen inne i filkatalogen som er spesielt for bildene dine. Hvis bildene ikke er lastet opp, kan du enkelt laste dem opp ved å klikke på "Last opp" -knappen.

3 Skriv ned filnavnet for alle de opplastede bildene du vil bruke på siden. Filnavnet skal skrives nøyaktig slik den vises i filområdet ditt. For eksempel picture1.jpg, picture2.jpg, og picture3.jpg.

4 Finn siden innsiden av "File Directory" som du ønsker å plassere de bevegelige bilder på. Velg alternativet til "Edit" på siden. Dette vil starte HTML editor for siden.

5 Plassere alle følgende kode innsiden av HTML editor. Sørg for å redigere bildenavnene for å reflektere navnene på bildene dine.

<! - Konfigurerbar script ->
<Script type = \ "text / javascript \">
theImage = new Array ()
GÅ

// Du kan erstatte bildenavnene med navnene på de faktiske bildene. Hvis du ikke trenger alle bildene, kan du slette de ekstra linjer.
// Format: theImage [...] = [image URL, link URL, navn / beskrivelse]
theImage [0] = [\ "http: //www.picture1.jpg \ & quot ;, \" \ ", \" Bilde 1 \ "]
GÅ
theImage [1] = [\ "http: //www.picture2.jpg \ & quot ;, \" \ ", \" Bilde 2 \ "]
GÅ
theImage [2] = [\ "http: //www.picture3.jpg \ & quot ;, \" \ ", \" Bilde 3 \ "]
GÅ
theImage [3] = [\ "http: //www.picture4.jpg \ & quot ;, \" \ ", \" Bilde 4 \ "]
GÅ
theImage [4] = [\ "http: //www.picture5.jpg \ & quot ;, \" \ ", \" Bilde 5 \ "]
GÅ

///// Plugin variabler

playspeed = 3000; // Du kan øke playspeed å gjøre bildene bevege seg raskere. Du kan redusere playspeed å gjøre bildene flytte tregere ms
// #####
// Nøkkel som holder der i matrisen er nå
i = 0
GÅ

// ###########################################
window.onload = function () {

// forhåndsinnlaste bilder i nettleseren
preloadSlide ()
GÅ

// Setter det første lysbildet
SetSlide (0)
GÅ

//Auto spill
PlaySlide ()
GÅ
}

// ###########################################
funksjon SetSlide (num) {
//for stor
i = num% theimage.length
GÅ
//for liten
if (i <0) i = theimage.length-en
GÅ

// Veksle
document.images.imgslide.src = theImage [i] [0]
GÅ

// Hvis de ønsker navnet på gjeldende lysbilde
document.getElementById ( 'slidebox'). innerhtml = theImage [i] [2]
GÅ

}

// ###########################################
funksjon PlaySlide () {
if (! window.playing) {
PlayingSlide (i + 1)
GÅ
if (document.slideshow.play) {
document.slideshow.play.value = \ "Stop \"
GÅ
}
}
else {
spiller = cleartimeout (spiller)
GÅ
if (document.slideshow.play) {
document.slideshow.play.value = \ "Play \"
GÅ
}
}
// Hvis du må endre bildet for \ "spille \" slide
if (document.images.imgPlay) {
setTimeout ( 'document.images.imgPlay.src = \ "' + imgStop + '\"', 1)
GÅ
imgStop = document.images.imgPlay.src
}
}

// ###########################################
funksjon PlayingSlide (num) {
spiller = setTimeout ( 'PlayingSlide (i + 1); SetSlide (i + 1);', playspeed)
GÅ
}

// ###########################################
fungere preloadSlide () {
for (k = 0; k <theimage.length; k ++) {
theImage [k] [0] = new Image (). src = theImage [k] [0]
GÅ
}
}

</ Script>

<! - Lysbildefremvisning HTML ->
<Form name = \ "slideshow \">

<Table border = \ "en \" cellpadding = \ "2 \" cellspacing = \ "0 \">
<Tr>
<Td align = \ "center \">
<a href=\"#\" onmouseover=\"this.href=theimage[i][1];return false\">
<Script type = \ "text / javascript \">
document.write ( '<img name = \ "imgslide \" id = \ "imgslide \" src = \ "' + theImage [0] [0] + '\" border = \ "0 \"> ")
</ Script>
</a>
</ Td>
</ Tr>
<Tr>
<Td align = \ "center \"> <div id = \ "slidebox \"> </ div> </ td>
</ Tr>
</ Table>

</ Form>
<! - Slutten av fremvisningen HTML ->

6 Klikk på "Lagre" og "Publiser" for å lagre endringene til siden.