Der Effekt des Karussellbilds ist in der Abbildung unten dargestellt. Die Bilder können einzeln gedreht werden. Klicken Sie auf die linke und rechte Schaltfläche, um die Seiten des Karussells umzublättern.
Die Darstellung ist:
Kopieren Sie den Codecode wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bilderkarussell mit Pfeil nach links und rechts</title>
<style type="text/css">
<!--
.rollBox{width:770px;height:260px;overflow:hidden;padding:10px;margin:0 auto;border:1px solid red;}
.rollBox .LeftBotton{height:40px;width:21px;background:url(images/sl.png) no-repeat 0px 5px;overflow:hidden;float:left;display:inline;margin:110px 0 0 0;cursor: Zeiger;}
.rollBox .RightBotton{height:40px;width:21px;background:url(images/sr.png) no-repeat 0px 5px;overflow:hidden;float:left;display:inline;margin:110px 0 0 0;cursor: Zeiger;}
.rollBox .Cont{width:726px;overflow:hidden;float:left;}
.rollBox .ScrCont{width:10000000px;}
.rollBox .Cont .pic{width:242px;float:left;text-align:center;}
.rollBox .Cont .pic img{padding:9px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;width:190px;height:190px;}
.rollBox .Cont .pic div{line-height:20px;color:#505050;margin:15px 0px;}
.rollBox .Cont .pic div span{display:block;}
.rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}
.rollBox .Cont a:hover{color:#f00;text-decoration:underline;}
.rollBox #List1,.rollBox #List2{float:left;}
->
</style>
</head>
<Körper>
<div>
<div onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>
<div id="ISL_Cont">
<div>
<div id="List1">
<!-- Bilderliste beginnt -->
<div>
<a href="/" target="_blank"><img src="images/1.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">Cooler Site-Code – Spezialeffekte 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/2.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">Cooler Site-Code – Spezialeffekte 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/3.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">Cooler Site-Code – Spezialeffekte 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/4.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">Cooler Site-Code – Spezialeffekte 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/5.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">Cooler Site-Code – Spezialeffekte 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/6.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">Cooler Site-Code – Spezialeffekte 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/7.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">Cooler Site-Code – Spezialeffekte 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/8.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">Cooler Site-Code – Spezialeffekte 1</a></span>
<span>45446547</span>
</div>
</div>
<!-- Bilderliste Ende -->
</div>
<div id="List2"></div>
</div>
</div>
<div onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>
</div>
</body>
<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
//Bildlaufliste VeVB.COm
var Geschwindigkeit = 1; //Geschwindigkeit (Millisekunden)
var Space = 5; //Jedes Mal verschieben (px)
var PageWidth = 726; //Seitenbreite
var fill = 0; //Gesamtverschiebung
var MoveLock = false;
var MoveTimeObj;
var Comp = 0;
var AutoPlayObj = null;
GetObj("List2").innerHTML = GetObj("List1").innerHTML;
GetObj('ISL_Cont').scrollLeft = fill;
GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
AutoPlay();
Funktion GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
Funktion AutoPlay(){ //Automatischer Bildlauf
clearInterval(AutoPlayObj);
AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000); //Intervallzeit
}
function ISL_GoUp(){ //Beginnen Sie mit dem Auftauchen
if(MoveLock) return;
clearInterval(AutoPlayObj);
MoveLock = true;
MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
}
function ISL_StopUp(){ //Hör auf aufzutauchen
clearInterval(MoveTimeObj);
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
CompScr();
}anders{
MoveLock = false;
}
AutoPlay();
}
function ISL_ScrUp(){ //Up-Aktion
if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
GetObj('ISL_Cont').scrollLeft -= Space ;
}
function ISL_GoDown(){ //Nach unten drehen
clearInterval(MoveTimeObj);
if(MoveLock) return;
clearInterval(AutoPlayObj);
MoveLock = true;
ISL_ScrDown();
MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
}
function ISL_StopDown(){ //Hör auf, nach unten zu drehen
clearInterval(MoveTimeObj);
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
CompScr();
}anders{
MoveLock = false;
}
AutoPlay();
}
function ISL_ScrDown(){ //Aktion nach unten scrollen
if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}
GetObj('ISL_Cont').scrollLeft += Space ;
}
Funktion CompScr(){
Varnum;
if(Comp == 0){MoveLock = false;return;}
if(Comp < 0){ //auftauchen
if(Comp < -Space){
Comp += Leerzeichen;
num = Leerzeichen;
}anders{
num = -Comp;
Komp = 0;
}
GetObj('ISL_Cont').scrollLeft -= num;
setTimeout('CompScr()',Speed);
}else{ //Leise ab
if(Comp > Leerzeichen){
Comp -= Leerzeichen;
num = Leerzeichen;
}anders{
num = Comp;
Komp = 0;
}
GetObj('ISL_Cont').scrollLeft += num;
setTimeout('CompScr()',Speed);
}
}
//--><!]]>
</script>
</html>