Ticker und Slideshow

Moderator: HTML-Laie

Antworten
Benutzeravatar
Hape
Administrator
Beiträge: 336
Registriert: Fr 22. Mai 2020, 00:33

Ticker und Slideshow

Beitrag von Hape »

Dieses JavaScript kombiniert einen tollen Ticker mit einer tollen Slideshow! Ticker und Slideshow sind synchronisiert. Sie können Ticker und Diashow jeweils an einer separaten Stelle platzieren. Beide können unterschiedlich groß sein.

Dieses Script ist für den Ticker:

Code: Alles auswählen

<script>
// CREDITS:
// Free JavaScript Ticker
// By Peter Gehrig
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

var text=new Array()
var textlink=new Array()
var texttarget=new Array()

/////////////////////////////////////////////////////////////////////
// START OF
// CONFIGURATION ZONE
////////////////////////////////////////////////////////////////////

// Your messages. Add as many as you like. Experienced webmasters may even embed simple HTML-tags (see samples below)
text[0]="<strong>Say hello to Maria</strong><br> Discover the most exciting place to experience the joy of JavaScript and DHTML! <span style='color:#FF0000'>Download free</span> scripts and use our unique online tools to pimp your website. "

text[1]="<strong>Miss JavaScript loves scripting</strong><br> However she is not an object-oriented scripting language used to enable programmatic access to objects within both the <span style='text-decoration:underline'>client applications</span> and other applications."

text[2]="<strong>Hannah wants you to come back</strong><br>JavaScript was influenced by many languages and was designed to look like Java, but to be easier for non-programmers to work with. <em>Have fun!</em>"

// Add a link for each message
// Enter "#" if you don't want to link a message (see sample below)
textlink[0]="http://www.fabulant.com"
textlink[1]="http://www.fabulant.com"
textlink[2]="#"

// Add the target of the link
// Corect values are "_blank","_top", "_self", "_parent" or the name of any frame
texttarget[0]="_blank"
texttarget[1]="_self"
texttarget[2]="_parent"

// Font
var textfont="Arial"

// Font-color
var textfontcolor="#000000"

// Font-color on rollover
var textfontcolorrollover="#ff0000"

// Font-size
var textfontsize=8

// Enter true "true" if you want add an underline, else add "none"
var textdecoration="none"

// Background-color
var textbgcolor="#FDCF15"

// Font-weight. Enter "bold" or "normal"
var textweight="normal"

// Font-style. Enter "italic" or "normal"
var textitalic="normal"

// width and height of ticker (pixels)
var textwidth=200
var textheight=150

// Pause between the Messages (Sekunden)
var textpause=2

// Border-width (write 0 if you don't want to add a border)
var textborder=1

// Border-color
var textbordercolor="#000000"

// Speed (higher=slower)
var speed=40

/////////////////////////////////////////////////////////////////////
// END OF
// CONFIGURATION ZONE
////////////////////////////////////////////////////////////////////
// Do not edit below this line

document.write("<table border=0 cellpadding=0 cellspacing=0>")
document.write("<tr><td width="+textwidth+" height="+textheight+" valign=top>")

var textalign="left"
var textvalign="top"
var textitalicA=""
var textitalicB=""
var textweightA=""
var textweightB=""
var textfontsizeHTML=1
var i_mes=0

var i_substring=0
var i_presubstring=0
var i_text=0
var textcontent=""
var notag=true
var textpresubstring=""
var textaftersubstring=""
textpause*=1000

var browserinfos=navigator.userAgent 
var ie4=!document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ie5=document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)  

function gettextcontent() {
	tablewidth=textwidth-2*textborder
	tableheight=textheight-2*textborder
	textpresubstring=text[i_text].substring(0,i_presubstring)
	var i_prepre=i_presubstring-1
	if (i_prepre<0) {i_prepre=0}
	if (text[i_text].substring(i_prepre,i_presubstring)=="<"){notag=false}
	if (text[i_text].substring(i_prepre,i_presubstring)==">"){notag=true}
	if (notag) {
		textcontent="<table border=0 cellpadding=4 width="+tablewidth+" height="+tableheight+"><tr valign="+textvalign+"><td align="+textalign+">"
		textcontent+="<a href='"+textlink[i_text]+"' target='"+texttarget[i_text]+"' style='position:relative; font-family:"+textfont+";text-decoration:"+textdecoration+";font-family:"+textfont+";color:"+textfontcolor+";font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+"' onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor+"\'\">"
		textcontent+=textpresubstring
		textcontent+="</a>"
		textcontent+="</td></tr></table>"
	}
}

function showtickerNS6() {
	textcontent="<table border=0 cellpadding=4 width="+textwidth+" height="+textheight+"><tr valign="+textvalign+"><td align="+textalign+">"
	textcontent+="<a href='"+textlink[i_text]+"' target='"+texttarget[i_text]+"' style='position:relative; font-family:"+textfont+";text-decoration:"+textdecoration+";font-family:"+textfont+";color:"+textfontcolor+";font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+"' onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor+"\'\">"
	textcontent+=text[i_text]
	textcontent+="</a>"
	textcontent+="</td></tr></table>"
	document.getElementById("ticker").innerHTML=textcontent
	i_text++
	if (i_text>=text.length-1) {i_text=0}
	var timer=setTimeout("showtickerNS6()", 2*textpause)
}

function showticker() {

	if (i_substring<=text[i_text].length) {
			i_substring++
			i_presubstring=i_substring-1
			if (i_presubstring<0) {i_presubstring=0}
			gettextcontent()
		if (ie4) {
			ticker.innerHTML=textcontent
			var timer=setTimeout("showticker()", speed)
		}
		if (ie5 || opera || ns6) {
			document.getElementById("ticker").innerHTML=textcontent
			var timer=setTimeout("showticker()", speed)
		}
	}
	else {
		clearTimeout(timer)
		changetext()
	}
}

function changetext() {
	i_substring=0
	i_presubstring=0
	i_text++
	if (i_text>text.length-1) {
		i_text=0
	}
	var tmr=setTimeout("changepicture()", textpause)
}


if (ie5 || ns6 || opera) {
	if (ns6 || opera) {
		textwidth-=2*textborder
		textheight-=2*textborder
	}
	document.write('<div ID="roof" style="position:relative;width:'+textwidth+'px;height:'+textheight+'px;border-style:solid;border-width:'+textborder+'px;border-color:'+textbordercolor+';background-color:'+textbgcolor+'">')
	document.write('<span ID="ticker" style="position:absolute;top:0px;left:0px;width:'+textwidth+'px;height:'+textheight+'px;"></span>')
	document.write('</div>')
}


document.write("</td></tr></table>")
</script>
Dieses Script ist für die Slideshow:

Code: Alles auswählen

<script>
// CREDITS:
// Slideshow with with lamellar effect
// by Peter Gehrig 
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com
// 03/01/2010

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a link to http://www.fabulant.com on the webpage 
// where this script will be running.

// CONFIGURATION:
// Go to http://www.fabulant.com and get the original code 
// with step-by-step instructions and copy-and-paste installation.

// your pictures. Add as many pictures a you like. In this case the pictures are in the same directory as the HTML-file.
var picture = new Array()
picture[0]="sample1.jpg"
picture[1]="sample2.jpg"
picture[2]="sample3.jpg"


// links for your pictures. You need as many links as pictures.
// If you don't want to link a picture write '#' instead of an URL (see last sample)
var pictureurl = new Array()
pictureurl[0]="http://www.fabulant.com"
pictureurl[1]="http://www.fabulant.com"
pictureurl[2]="http://www.fabulant.com"

// target of the picture-links ("_blank", "_top", "_self", "_parent" or "nameOfYourFrame")
var target_url="_blank"
	
// number of lamellas.
var x_slices=8

// width of slideshow
var slideshow_width=200

// height of slideshow
var slideshow_height=150

// pause beween the pictures (seconds)
var pause=2

var imgpreload=new Array()
for (i=0;i<=picture.length;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=picture[i]
}

var picturewidth
var pictureheight
var i_loop=0
var i_picture=0
var width_slice
var cliptop=0
var clipbottom
var i_clipright=1
var content=""
pause=pause*1000

function initiate() {
	getcontent()
	for (i=0;i<=x_slices;i++) {
     	var thisinners=eval("document.getElementById('s"+i+"')")
		thisinners.innerHTML=content
		var thiss=eval("document.getElementById('s"+i+"').style")
		thiss.left=0+"px"
		thiss.top=0+"px"
  	}
	var thisspan=eval("document.getElementById('s0')")
	picturewidth=thisspan.offsetWidth
	pictureheight=thisspan.offsetHeight
	width_slice=Math.ceil(picturewidth/x_slices)
	clipbottom=pictureheight
	document.getElementById("whole").style.left=0+"px"
	document.getElementById("whole").style.top=0+"px"
	i_picture++
	openlamellar()
}

function openlamellar() {
	clipleft=-width_slice
	clipright=0
    if (i_clipright<=width_slice) {
        for (i=0;i<=x_slices;i++) {
            var thiss=eval("document.getElementById('s"+i+"').style")
            thiss.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
            clipleft+=width_slice
            clipright=clipleft+i_clipright
		}
    i_clipright++
    var timer=setTimeout("openlamellar()",20)
   	}
   	else {
		clearTimeout(timer)
		document.getElementById('whole').innerHTML=content
		showticker()
	}
}

function getcontent() {
    content="<a href="+pictureurl[i_picture]+" target="+target_url+">"
    content+="<img src="+picture[i_picture]+" border=0>"
    content+="</a>"
}

function changepicture() {
	document.getElementById("ticker").innerHTML=""
	i_clipright=0
	clipleft=0
	clipright=0
	for (i=0;i<=x_slices;i++) {
       	var thiss=eval("document.getElementById('s"+i+"').style")
    	thiss.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
	}
	if (i_picture>picture.length-1) {i_picture=0}
	getcontent()

	for (i=0;i<=x_slices;i++) {
        var thisinners=eval("document.getElementById('s"+i+"')")
        thisinners.innerHTML=content   
    }
	i_picture++
	openlamellar()
}

document.write("<div style='position:relative;width:"+slideshow_width+"px;height:"+slideshow_height+"px;'>")
document.write("<span id='whole' style='position:absolute;top:0px;left:0px'></span>")
for (i=0;i<=x_slices;i++) {
 	document.write("<span id='s"+i+"' style='position:absolute;top:0px;left:0px'></span>")
}
document.write("</div>")
document.close()

window.onload=initiate
</script>
Demoseite dazu hier: Ticker und Slideshow

Antworten