[JS] Zmiana div po x czasie... Opcje

[SN@JPER^]

Witam,

w jaki sposób zrobić zmiane div po x czasie?

Chodzi mi bardziej o to, że jak div o danym id nie istnieje to nie idzie na początek...

[HTML] pobierz, plaintext 
var myDiv_1 = document.getElementById('mains_1');
  var myDiv_2 = document.getElementById('mains_2');
  var myDiv_3 = document.getElementById('mains_3');
  var myDiv_4 = document.getElementById('mains_4');
  var myDiv_5 = document.getElementById('mains_5');
  var myDiv_6 = document.getElementById('mains_6');
 
  if(myDiv_1.className != 'contentdiv none')
  {
 
 
 
    myDiv_1.className = 'contentdiv none';
    myDiv_2.className = 'contentdiv block';
    myDiv_3.className = 'contentdiv none';
    myDiv_4.className = 'contentdiv none';
    myDiv_5.className = 'contentdiv none';
    myDiv_6.className = 'contentdiv none';
 
  }
  else if(myDiv_2.className != 'contentdiv none')
  {
 
    myDiv_1.className = 'contentdiv none';
    myDiv_2.className = 'contentdiv none';
    myDiv_3.className = 'contentdiv block';
    myDiv_4.className = 'contentdiv none';
    myDiv_5.className = 'contentdiv none';
    myDiv_6.className = 'contentdiv none';
 
  }
  else if(myDiv_3.className != 'contentdiv none')
  {
 
    myDiv_1.className = 'contentdiv none';
    myDiv_2.className = 'contentdiv none';
    myDiv_3.className = 'contentdiv none';
    myDiv_4.className = 'contentdiv block';
    myDiv_5.className = 'contentdiv none';
    myDiv_6.className = 'contentdiv none';
  }
 
  else if(myDiv_4.className != 'contentdiv none')
  {
 
        myDiv_1.className = 'contentdiv none';
        myDiv_2.className = 'contentdiv none';
        myDiv_3.className = 'contentdiv none';
        myDiv_4.className = 'contentdiv none';
        myDiv_5.className = 'contentdiv block';
        myDiv_6.className = 'contentdiv none';
  }
 
  else if(myDiv_5.className != 'contentdiv none')
  {
 
        myDiv_1.className = 'contentdiv none';
        myDiv_2.className = 'contentdiv none';
        myDiv_3.className = 'contentdiv none';
        myDiv_4.className = 'contentdiv none';
        myDiv_5.className = 'contentdiv none';
        myDiv_6.className = 'contentdiv block';
  }
 
  else if(myDiv_6.className != 'contentdiv none')
  {
 
        myDiv_1.className = 'contentdiv block';
        myDiv_2.className = 'contentdiv none';
        myDiv_3.className = 'contentdiv none';
        myDiv_4.className = 'contentdiv none';
        myDiv_5.className = 'contentdiv none';
        myDiv_6.className = 'contentdiv none';
 
  }
 
setInterval("show_and_hide()", czas);
[HTML] pobierz, plaintext 

z tym, że jak myDiv_5 albo myDiv_6 nie istnieje to kończy prace... a jak zrobić, że od początku przesuwało?

Próbowałem też pętlą, ale nic mi nie wyszło...

[HTML] pobierz, plaintext 
myDivs = new Array();
    myDiv = new Array();
    var a = 0;
    for(i=0; i<6; i++){
        if(document.getElementById('mains_' + i)){
            myDivs[i] = document.getElementById('mains_' + i);
        }
    }
 
    for(i=0; i<myDivs.length; i++){
        if(typeof(myDivs[i]) != 'undefined' && typeof(myDivs[i]) != 'null'){
            if(myDivs[i].className=='contentdiv block'){
                myDivs[i].className = 'contentdiv none';
 
                //alert(i);
            }else{
 
 
                myDiv[a] = myDivs[i];
                myDiv[a].className = 'contentdiv block';
 
 
            }
 
        }
    }
[HTML] pobierz, plaintext 

Ten post edytował SN@JPER^ 16.10.2011, 14:23:03

[zegarek84]

I na pewno łatwiej będzie tu skorzystać z jQuery (manipulacja DOM).

nie na pewno... a tym bardziej nie optymalniej... fakt, iż jeśli chcemy pobrać wszystkie div'y określonym prefixem to zamiast implementacji metody setElements można było skorzystać z selektorów CSS w jQuery lub z .querySelectorAll po atrybucie id zaczynającym się od danego prefix'u



może się nigdzie nie pomyliłem - masz gotowca napisanego z palca z przykładem użycia klasy:

[JAVASCRIPT] pobierz, plaintext 
function ShowHide(){
    this._aEl = [];
}
 
ShowHide.prototype = {
    _aEl: null,
    _sHideClass: 'contentdiv none',
    _sShowClass: 'contentdiv block',
    _i:0,
    _interval:null,
    setElements: function(sPrefix,iBegin, iEnd){
        var el, ar = this._aEl;
        for(var i = iBegin; i<=iEnd; ++i){
            el = document.getElementById(sPrefix+i);
            if(!!el)
                ar[ar.length] = el;
        }
        el = ar = null;
        return this;
    },
    hideAll: function(){
        for(var s=this._sHideClass,i=0,a=this._aEl,iL = a.length; i<iL;++i)
            a[i].setAttribute('class', s);
        return this;
    },
    showFirst: function(){
        if(this._aEl[0])
            this._aEl[0].setAttribute('class', this._sShowClass);
        return this;
    },
    showNext: function(){
        var a = this._aEl;
        if(a.length){
            a[this._i].setAttribute('class', this._sHideClass);
            if(this._i<(a.length-1)){
                ++this._i;
            }else{
                this._i=0;
            }
            a[this._i].setAttribute('class', this._sShowClass);
        }
        a= null;
        return this;
    },
    startInterval:function(i){
        if(!i) i = 1000;
        this._interval = setInterval((function(ob){
            return function(){
                ob.showNext();
            }
        })(this),i);
        return this;
    },
    stopInterval:function(){
        clearInterval(this._interval);
        return this;
    }
};
 
// PRZYKŁADOWE UŻYCIE
 
var oSH = new ShowHide();
oSH
    .setElements('mains_', 0, 6)
    .hideAll()
    .showFirst()
    .startInterval(500);
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował zegarek84 16.10.2011, 19:22:44