So hab mich mal dran versucht und es geht auch soweit, hier mal meine Testseite.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Moo Test</title>
<script src="mootools-1.2.2-core.js"></script>
<style>
body { background-color: #80ffff; }
#mScroller {
width: 200px;
overflow: hidden;
}
#mScroller a {
float: left;
padding: 0 5px;
}
#mScroller img {
border: 0px;
}
</style>
<script>
var mScroller = new Class({
root : null,
links : [],
firstA : 0,
initialize : function(elid) {
this.root = $(elid);
this.links = $$('#mScroller a');
this.iDiv = this.root.getFirst('div');
this.iDiv.setStyle('width', this.getImgWidthSum());
this.start();
},
getImgWidthSum : function () {
var width = 0;
this.links.each(function(item, index) {
width += item.getSize().x;
});
return width;
},
scroll : function() {
var pos = this.root.getScroll();
var fA = this.links[this.firstA];
var fAsize = fA.getSize().x;
if (pos.x > fAsize) {
this.iDiv.grab(fA);
pos.x -= fAsize;
if (this.firstA == this.links.length - 1) {
this.firstA = 0;
} else {
this.firstA++;
}
}
this.root.scrollTo(pos.x + 15, pos.y);
},
stop : function () {
$clear(this.per);
},
start : function () {
this.per = this.scroll.periodical(200, this);
}
});
window.addEvent('domready', function () {
myScroller = new mScroller('mScroller')
$('mScroller').addEvents({
'mouseover': function(){
myScroller.stop();
},
'mouseout': function () {
myScroller.start();
}
});
});
</script>
</head>
<body>
<h1>Testen halt</h1>
<div id="mScroller">
<div>
<a href="www.ilch.de"><img src="http://www.ilch.de/images/banner/kilch.jpg"></a>
<a href="www.ilch.de"><img src="http://www.ilch.de/images/banner/copy_by_ilch.gif"></a>
<a href="www.ilch.de"><img src="http://www.ilch.de/images/banner/kleiner_banner.gif"></a>
<a href="www.ilch.de"><img src="http://www.ilch.de/images/banner/nkilch.gif"></a>
</div>
</div>
<a href="javascript:myScroller.stop();">stop</a>
</body>
</html>
MooTools bekommst du von
mootools.net/
Do. 30.04.2009
11:38 Uhr
#1
