sistema imatges automàtiques fet

8 years ago · dfdbf107b6
3 changed files with 22 additions and 17 deletions
--- a/index.html
+++ b/index.html
@ -22,8 +22,8 @@
  </head>
  <body onload='OnLoadIndex();'>
      <div class='own-container'>
        <img id='backgroundImage0' class='own-indexBackgroundImage' src='imatges/mainBackground.jpg' />
        <img id='backgroundImage1' class='own-indexBackgroundImage opacity0' src='imatges/background/background0.jpg' />
        <img id='backgroundImage0' class='own-indexBackgroundImage opacity0' src='imatges/background/background1.jpg' />
        <img id='backgroundImage1' class='own-indexBackgroundImage' src='imatges/background/background0.jpg' />
        <div class='own-lang own-whiteText'>
          <a href="#">CAT</a>
          <a href='#'>CAST</a>
--- a/index.js
+++ b/index.js
@ -15,25 +15,30 @@ function OnLoadDefault(){

 function OnLoadIndex(){
  OnLoadDefault();
  var numImg=0;
  var visibleImg=0;
  var numImg=3;
  var visibleImg=1;
  setInterval(function(){

    document.getElementById("backgroundImage"+visibleImg).className="own-indexBackgroundImage";
    console.log(numImg);
    console.log("visibleImg: " + visibleImg);


    document.getElementById("backgroundImage"+visibleImg).className+=" own-opacity0";
    document.getElementById("backgroundImage"+visibleImg).src="imatges/background/background"+numImg+".jpg";
    if(visibleImg==0){
      visibleImg=1;
    }else{
      visibleImg=0;
    }
    document.getElementById("backgroundImage"+visibleImg).className+=" own-opacity0";
    document.getElementById("backgroundImage"+visibleImg).src="imatges/background/background"+numImg+".jpg";

    document.getElementById("backgroundImage"+visibleImg).className="own-indexBackgroundImage";

    numImg++;
    if(numImg>9)
    {
      numImg=0;
    }
  }, 5000);
  }, 4000);
 }
 function OnLoadNosaltres(){
  OnLoadDefault();
--- a/own.css
+++ b/own.css
@ -94,10 +94,10 @@ body {
    left: 0px;
    top: 0px;

    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    /*-webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;*/
  }
 }

@ -110,13 +110,13 @@ body {
    left: 0px;
    top: 0px;

    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    /*-webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;*/
  }
 }
 .own-opactity0{
 .own-opacity0{
  opacity: 0;
 }
 .own-langIndex{