Ciao a tutti,
mi hanno fornito uno script con slider cosi strutturato
<Prev (1/3) Next>
vorrei sostituire questo risultato con l'immagine dei tre pallini grey_bullet.png (cioè tanti quanti sono le immagini da scorrere)... e invece di cliccare su PROX o >, cliccare sull'immagine grey_bullet.png ... è complicato???
questo è codice.. nelle parti in rosso ho evidenziato la parte che secondo me andrebbe modificata..
Mi aiutate? Grazie mille!
mi hanno fornito uno script con slider cosi strutturato
<Prev (1/3) Next>
vorrei sostituire questo risultato con l'immagine dei tre pallini grey_bullet.png (cioè tanti quanti sono le immagini da scorrere)... e invece di cliccare su PROX o >, cliccare sull'immagine grey_bullet.png ... è complicato???
questo è codice.. nelle parti in rosso ho evidenziato la parte che secondo me andrebbe modificata..
Mi aiutate? Grazie mille!
Codice:
CatGroupSlider = function(slider) {
this.allSlides = [];
this.currSlide = 0;
this.lastIndex = 0;
this.counterNode = null;
this.start(slider);
};
CatGroupSlider.prototype.start = function(slider) {
var thisSlider = document.getElementById(slider);
if(thisSlider == null) {
return;
}
//Items are hidden of screen, allow hidden links to receive focus and show item.
var itemLinks = thisSlider.getElementsByTagName("a");
for (var il = 0; il < itemLinks.length; il++)
{
itemLinks[il].onfocus = this.focusListener;
itemLinks[il].slideNumber = il;
itemLinks[il].mySlider = this;
}
var allChildren = thisSlider.childNodes;
for (var i = 0, j = allChildren.length; i < j; i++) {
if (allChildren[i].nodeType === 1) { //These are the slides, should be block level elements.
CatGroupSlider.addClass(allChildren[i], CatGroupSlider.offScreenClass);
this.allSlides[this.allSlides.length] = allChildren[i];
}
}
CatGroupSlider.removeClass(this.allSlides[this.currSlide], CatGroupSlider.offScreenClass);
this.lastIndex = this.allSlides.length - 1;
[COLOR="#FF0000"] if(this.allSlides.length > 1) {
//Create nav control.
var counterTxt = document.createElement("span");
counterTxt.className = "counterTxt";
var counterNode = document.createTextNode(this.setCounterText());
this.counterNode = counterNode;
counterTxt.appendChild(counterNode);
var prevBtn = document.createElement("a");
prevBtn.innerHTML = "<span class='slidePrev'><</span> Prev";
prevBtn.setAttribute("href", "#");
prevBtn.className = "btnPrev";
prevBtn.mySlider = this;
prevBtn.onclick = this.prev;
var nextBtn = document.createElement("a");
nextBtn.innerHTML = "Next <span class='slideNext'>></span>";
nextBtn.setAttribute("href", "#");
nextBtn.className = "btnNext";
nextBtn.mySlider = this;
nextBtn.onclick = this.next;
var slideCtrl = document.createElement("DIV");
slideCtrl.appendChild(prevBtn);
slideCtrl.appendChild(counterTxt);
slideCtrl.appendChild(nextBtn);
slideCtrl.className = "slideControls";
thisSlider.parentNode.appendChild(slideCtrl);
}
};[/COLOR]
CatGroupSlider.prototype.next = function() {
var thisSlider = this.mySlider;
CatGroupSlider.addClass(thisSlider.allSlides[thisSlider.currSlide], CatGroupSlider.offScreenClass);
if (thisSlider.currSlide < thisSlider.lastIndex) {
CatGroupSlider.removeClass(thisSlider.allSlides[++thisSlider.currSlide], CatGroupSlider.offScreenClass);
} else {
thisSlider.currSlide = 0;
CatGroupSlider.removeClass(thisSlider.allSlides[0], CatGroupSlider.offScreenClass);
}
thisSlider.counterNode.nodeValue = thisSlider.setCounterText();
return false;
};
CatGroupSlider.prototype.prev = function() {
var thisSlider = this.mySlider;
CatGroupSlider.addClass(thisSlider.allSlides[thisSlider.currSlide], CatGroupSlider.offScreenClass);
if (thisSlider.currSlide > 0) {
CatGroupSlider.removeClass(thisSlider.allSlides[--thisSlider.currSlide], CatGroupSlider.offScreenClass);
} else {
thisSlider.currSlide = thisSlider.lastIndex;
CatGroupSlider.removeClass(thisSlider.allSlides[thisSlider.lastIndex], CatGroupSlider.offScreenClass);
}
thisSlider.counterNode.nodeValue = thisSlider.setCounterText();
return false;
};
CatGroupSlider.prototype.setCounterText = function() {
return " (" + (this.currSlide + 1) + " / " + (this.allSlides.length) + ") ";
};
//Make links within widget respond to tabbing.
CatGroupSlider.prototype.focusListener = function() {
//slideNumber should always be in range.
if(this.slideNumber != this.mySlider.currSlide) {
CatGroupSlider.removeClass(this.mySlider.allSlides[this.slideNumber], CatGroupSlider.offScreenClass);
CatGroupSlider.addClass(this.mySlider.allSlides[this.mySlider.currSlide], CatGroupSlider.offScreenClass);
this.mySlider.currSlide = this.slideNumber;
this.mySlider.counterNode.nodeValue = this.mySlider.setCounterText();
}
};
//Following two methods specific to this function for sake of speed, not for general use.
CatGroupSlider.addClass = function(theElement, theClassName) {
if(theElement.className === "") {
theElement.className = theClassName;
} else if (theElement.className.indexOf(theClassName) == -1) {
theElement.className += " " + theClassName;
}
};
CatGroupSlider.removeClass = function(theElement, theClassName) {
var newClassName = theElement.className;
theElement.className = newClassName.replace(theClassName, "").replace(/\s+$/g,"");
};
CatGroupSlider.offScreenClass = "off-screen";
Ultima modifica di un moderatore: