Mootools - Как сделать новостной слайдер (тикер) со стрелками
Я разрабатываю сайт, используя Mootools в качестве фреймворка Javascript.
Мне нужно, чтобы некоторые последние новости циркулировали в горизонтальном тикере новостей в верхней части страницы. Я хочу, чтобы 4 или 5 разных новостей (из общего числа 20) висели одновременно и вращались.
Я нашел следующий чистый скрипт:
/* ImageSlider
* version 0.1 *
* Copyright (c) 2008-2010 ecce media Ltd (www.eccemedia.com) *
* http://www.eccemedia.com/blog/blog.html&blogid=5 *
*/
var ImageSlider = new Class({
Implements: [Options],
options: {
sliders: 'slider-list',
transitionduration:5000,
autorotate:true,
transition:Fx.Transitions.linear
},
initialize: function(options) {
this.setOptions(options);
var c = this;
var op = this.options;
if(op.autorotate) this.animate();
$(op.sliders).addEvent('mouseover',function(){op.SlideFX.pause();});
$(op.sliders).addEvent('mouseleave',function(){op.SlideFX.resume();});
},
animate:function(){
var c = this;
var op = this.options;
var sliders = $$('#'+op.sliders+' li');
if(sliders.length>0){
op.SlideFX = new Fx.Tween(sliders[0],{'transition':op.transition,'duration':op.transitionduration,'onComplete':function(){
sliders[0].inject($(op.sliders));
sliders[0].setStyle('margin-left',0);
c.animate();
}});
op.SlideFX.start('margin-left', -sliders[0].getSize().x);
}
}
});
var sliderID = new ImageSlider({'sliders':'TickerHorizontal','transitionduration':6000});
HTML выглядит как
<div id="TickerHorizontal">
<ul>
<li>.....</li>
<li>.....</li>
<li>.....</li>
</ul>
</div>
Скрипт хорошо работает как при скольжении, так и при наведении мыши на НО. Я изо всех сил пытаюсь добавить кнопки для перемещения вперед и назад вручную.
Любое предложение?
1 ответ
Хорошо, нашел отличную галерею Mootools, которая делает именно то, что мне нужно, и даже больше: https://github.com/ginger/slideGallery