<div class="image-slider">
<div class="img-previewer">
<div id="imgsbox" style="position:relative">
<?php foreach ($pictures as $key =>$value) :?>
<a href="<?=$hrefs[$key];?>
">
<img src="<?=$pictures[$key];?>" alt="" /></a>
<?php endforeach;?></div>
</div>
<div class="img-gallery">
<div class="img-desc">
<h3>
<a href="javascript:;" id="imgTitle">
<?=$titles[0];?></a>
</h3>
<p>
<a href="javascript:;" id="imgDescribe">
<?=$describe[0];?></a>
</p>
</div>
<div class="image-listing">
<ul>
<?php
foreach ($s_pictures as $k=>$v):
$sld = $k == 0 ? "selected" : "";
?>
<li class="<?=$sld;?>
">
<a href="javascript:;">
<img src="<?=$v;?>" alt="" /></a>
</li>
<?php endforeach;?></ul>
</div>
</div>
</div>
<script type="text/javascript">
window.addEvent("domready", function() {
var imgplayer = new Class({
initialize: function(a) {
this.autoPlay = a.autoPlay || false;
this.imgbox = a.imgbox;
this.imgList = a.imgList;
this.duration = a.duration || 500;
this.imgWidth = a.imgWidth;
this.imgTitle = a.imgTitle;
this.imgDescribe = a.imgDescribe;
this.timer = null;
this.imgbox.setStyle("width", this.imgWidth * 5);
this.fx = new Fx.Tween(this.imgbox, {
duration: this.duration
});
this.currentIndex = a.currentIndex || 0;
this.li = this.imgList.getElements('li');
for (i = 0; i < this.li.length; i++) {
this.li[i].addEvents({
'mouseenter': this.addCount.pass([i], this),
'mouseleave': this.addCount.pass(['go'], this)
});
}
if (this.autoPlay == true) {
this.autoPlayer();
}
},
addCount: function(i) {
if ($type(i) == 'number') {
$clear(this.timer);
this.currentIndex = i;
this.fx.cancel().start('left', (this.imgWidth * -this.currentIndex) + "px");
} else {
this.currentIndex = this.currentIndex > 2 ? 0 : this.currentIndex + 1;
this.fx.start('left', (this.imgWidth * -this.currentIndex) + "px");
if (this.autoPlay == true && i == "go") {
this.autoPlayer();
}
}
this.li.removeClass("selected");
this.li[this.currentIndex].addClass("selected");
this.imgTitle['o'].set('text', this.imgTitle['data'][this.currentIndex])
this.imgDescribe['o'].set('text', this.imgDescribe['data'][this.currentIndex])
},
autoPlayer: function() {
this.timer = this.addCount.periodical(3000, this);
}
})
var ig = new imgplayer({
imgbox: $("imgsbox"),
imgTitle: {
'o': $('imgTitle'),
"data": <?= json_encode($titles); ?>
},
imgDescribe: {
'o': $('imgDescribe'),
'data': <?= json_encode($describe); ?>
},
imgWidth: 950,
imgList: $$(".image-listing")[0],
autoPlay: true
});
})
</script>