zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Ein Java script einbinden.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.04.2009, 13:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.10.2008
Ort: Papenburg
Beiträge: 41
Miso befindet sich auf einem aufstrebenden Ast
Standard Ein Java script einbinden.

Kann dieser Code extern einbebunden werden damit die Seite kleiner wird
und wenn ja, wie?
Der Code kommt von dynamicdive.
Dynamic Drive DHTML Scripts- Left-Right Image Slideshow Script

Er soll in einen div container eingebaut werden.

Oder kennt Ihr eine bessere Lösung?

Code:
<script language="JavaScript1.2">

/*
Left-Right image slideshow Script-
By Dynamic Drive (www.dynamicdrive.com)
For full source code, terms of use, and 100's more scripts, visit http://dynamicdrive.com
*/

///////configure the below four variables to change the style of the slider///////
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth='100px'
var scrollerheight='106px'
var scrollerbgcolor='white'
//3000 miliseconds=3 seconds
var pausebetweenimages=3000


//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]='<a href="http://www.cnn.com"><img src="PE01805A.gif" border=0"></a>'
slideimages[1]='<img src="PE01803A.gif">'
slideimages[2]='<img src="TN00411A.gif">'
slideimages[3]='<img src="PE02054A.gif">'
slideimages[4]='<img src="cake.gif">'
//extend this list

///////Do not edit pass this line///////////////////////
     
var ie=document.all
var dom=document.getElementById

if (slideimages.length>1)
i=2
else
i=0

function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.left>0&&tlayer.left<=5){
tlayer.left=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.left>=tlayer.document.width*-1){
tlayer.left-=5
setTimeout("move1(tlayer)",50)
}
else{
tlayer.left=parseInt(scrollerwidth)+5
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.left>0&&tlayer2.left<=5){
tlayer2.left=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.left>=tlayer2.document.width*-1){
tlayer2.left-=5
setTimeout("move2(tlayer2)",50)
}
else{
tlayer2.left=parseInt(scrollerwidth)+5
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.left)>0&&parseInt(tdiv.style.left)<=5){
tdiv.style.left=0+"px"
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(scrollerdiv2)",pausebetweenimages)
return
}
if (parseInt(tdiv.style.left)>=tdiv.offsetWidth*-1){
tdiv.style.left=parseInt(tdiv.style.left)-5+"px"
setTimeout("move3(tdiv)",50)
}
else{
tdiv.style.left=scrollerwidth
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.left)>0&&parseInt(tdiv2.style.left)<=5){
tdiv2.style.left=0+"px"
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(scrollerdiv1)",pausebetweenimages)
return
}
if (parseInt(tdiv2.style.left)>=tdiv2.offsetWidth*-1){
tdiv2.style.left=parseInt(tdiv2.style.left)-5+"px"
setTimeout("move4(scrollerdiv2)",50)
}
else{
tdiv2.style.left=scrollerwidth
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (ie||dom){
scrollerdiv1=ie? first2 : document.getElementById("first2")
scrollerdiv2=ie? second2 : document.getElementById("second2")
move3(scrollerdiv1)
scrollerdiv2.style.left=scrollerwidth
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.left=parseInt(scrollerwidth)+5
document.main.document.second.visibility='show'
}
}

window.onload=startscroll

</script>




<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; visibility=hide>
<layer id="first" left=1 top=0 width=&{scrollerwidth}; >
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[1])
</script>
</layer>
</ilayer>

<script language="JavaScript1.2">
if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1px;top:0px;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
__________________
Kroatien - Zeitlose mediterrane Schönheit
Urlaubsreif : www.top-ferienhaus-kroatien.de
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.04.2009, 00:05
Benutzerbild von Speedy19102000
Benutzer
neuer user
 
Registriert seit: 02.12.2007
Beiträge: 46
Speedy19102000 befindet sich auf einem aufstrebenden Ast
Standard

Moin!

Ja und zwar so:

Die HTML-Datei
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>-</title>

<script src="externjs.js" type="text/javascript"></script>

</head>
<body>

<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; visibility=hide>
<layer id="first" left=1 top=0 width=&{scrollerwidth}; >
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[1])
</script>
</layer>
</ilayer>

<script language="JavaScript1.2">
if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1px;top:0px;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>

</body>
</html>
... und die "externjs.js"-Datei
Code:
/*
Left-Right image slideshow Script-
By Dynamic Drive (www.dynamicdrive.com)
For full source code, terms of use, and 100's more scripts, visit http://dynamicdrive.com
*/

///////configure the below four variables to change the style of the slider///////
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth='100px'
var scrollerheight='106px'
var scrollerbgcolor='white'
//3000 miliseconds=3 seconds
var pausebetweenimages=3000


//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]='<a href="http://www.cnn.com"><img src="PE01805A.gif" border=0"></a>'
slideimages[1]='<img src="PE01803A.gif">'
slideimages[2]='<img src="TN00411A.gif">'
slideimages[3]='<img src="PE02054A.gif">'
slideimages[4]='<img src="cake.gif">'
//extend this list

///////Do not edit pass this line///////////////////////
     
var ie=document.all
var dom=document.getElementById

if (slideimages.length>1)
i=2
else
i=0

function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.left>0&&tlayer.left<=5){
tlayer.left=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.left>=tlayer.document.width*-1){
tlayer.left-=5
setTimeout("move1(tlayer)",50)
}
else{
tlayer.left=parseInt(scrollerwidth)+5
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.left>0&&tlayer2.left<=5){
tlayer2.left=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.left>=tlayer2.document.width*-1){
tlayer2.left-=5
setTimeout("move2(tlayer2)",50)
}
else{
tlayer2.left=parseInt(scrollerwidth)+5
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.left)>0&&parseInt(tdiv.style.left)<=5){
tdiv.style.left=0+"px"
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(scrollerdiv2)",pausebetweenimages)
return
}
if (parseInt(tdiv.style.left)>=tdiv.offsetWidth*-1){
tdiv.style.left=parseInt(tdiv.style.left)-5+"px"
setTimeout("move3(tdiv)",50)
}
else{
tdiv.style.left=scrollerwidth
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.left)>0&&parseInt(tdiv2.style.left)<=5){
tdiv2.style.left=0+"px"
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(scrollerdiv1)",pausebetweenimages)
return
}
if (parseInt(tdiv2.style.left)>=tdiv2.offsetWidth*-1){
tdiv2.style.left=parseInt(tdiv2.style.left)-5+"px"
setTimeout("move4(scrollerdiv2)",50)
}
else{
tdiv2.style.left=scrollerwidth
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (ie||dom){
scrollerdiv1=ie? first2 : document.getElementById("first2")
scrollerdiv2=ie? second2 : document.getElementById("second2")
move3(scrollerdiv1)
scrollerdiv2.style.left=scrollerwidth
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.left=parseInt(scrollerwidth)+5
document.main.document.second.visibility='show'
}
}

window.onload=startscroll
MfG
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.04.2009, 11:13
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.10.2008
Ort: Papenburg
Beiträge: 41
Miso befindet sich auf einem aufstrebenden Ast
Standard Danke für die Antwort

So nun habe ich das prinzip einigermassen verstanden.

Doch nun möchte ich ein anderes srcipt einbauen.
Dieses :
Dynamic Drive DHTML Scripts- Blending Image Slideshow Script

es ist mit einem übergang von bild zu bild.

Im IE tadelos, doch im Firefox ist kein übergang vorhanden.

Kennt Ihr so ein Sript welches im IE und im Firefox gleich funktioniert.

MFG

Miso
__________________
Kroatien - Zeitlose mediterrane Schönheit
Urlaubsreif : www.top-ferienhaus-kroatien.de
Mit Zitat antworten
  #4 (permalink)  
Alt 22.04.2009, 15:21
Benutzerbild von Speedy19102000
Benutzer
neuer user
 
Registriert seit: 02.12.2007
Beiträge: 46
Speedy19102000 befindet sich auf einem aufstrebenden Ast
Standard

Moin!

Zitat:
Zitat von Miso Beitrag anzeigen
So nun habe ich das prinzip einigermassen verstanden.
Das freud mich sehr!

Hier ist z.B. so ein JS und es funktioniert auch im FF. Klick
Es ist alles auf der Seite, was Du brauchst.

Aber bitte nicht mehr umentscheiden, ja?

MfG
Mit Zitat antworten
  #5 (permalink)  
Alt 22.04.2009, 15:49
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.10.2008
Ort: Papenburg
Beiträge: 41
Miso befindet sich auf einem aufstrebenden Ast
Standard Genau so soll es sein.

Vielen Dank, seit Stunden suche ich im Internet.
Entweder nur der Ie oder nur de FF.

Danke.
__________________
Kroatien - Zeitlose mediterrane Schönheit
Urlaubsreif : www.top-ferienhaus-kroatien.de
Mit Zitat antworten
  #6 (permalink)  
Alt 22.04.2009, 15:50
Benutzerbild von Speedy19102000
Benutzer
neuer user
 
Registriert seit: 02.12.2007
Beiträge: 46
Speedy19102000 befindet sich auf einem aufstrebenden Ast
Standard

Bitte, gern geschehen!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Java Script OOP??? Daniel_CB Javascript & Ajax 2 06.05.2007 18:20
Java Script Problem mit Auslagerung. Somba Javascript & Ajax 11 15.01.2007 13:00
Java Script in XHTML seelefant (X)HTML 8 08.01.2007 01:50
Java Script Problem mit Smilies Y05h1 Offtopic 0 06.03.2005 19:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:45 Uhr.