JavaScript change



  • Hello. I just got the code, it works here on the website, but why when I put it on my website, it doesn't work anymore. Look, if you'll find anything, I'll break my head for the second day.

    code html:

        var gallery = {
          cnt: 0,
          container: document.getElementById("container_image"),
          timer: null,
          rds: "btn1",
          pos: 0,
          top: 1,
          init: function(i) {
            this.cnt = i;
            this.container.style.width = i * 700 + "px";
            this.timer = setInterval(function() {
              gallery.start();
            }, 1500);
          },
          start: function() {
            if (this.top == 1) {
              this.pos = 0;
              this.top += 1;
              document.getElementById("btn1").style.backgroundColor = "red";
              document.getElementById("btn2").style.backgroundColor = "green";
              document.getElementById("btn3").style.backgroundColor = "green";
            } else if (this.top == 2) {
              this.pos -= 350 * 2;
              this.top += 1;
              document.getElementById("btn1").style.backgroundColor = "green";
              document.getElementById("btn2").style.backgroundColor = "red";
              document.getElementById("btn3").style.backgroundColor = "green";
            } else if (this.top == 3) {
              this.pos -= 350 * 2;
              this.top = 1;
              document.getElementById("btn1").style.backgroundColor = "green";
              document.getElementById("btn2").style.backgroundColor = "green";
              document.getElementById("btn3").style.backgroundColor = "red";
            }
            this.container.style.left = this.pos + "px";
          },
          slide: function(event) {
            var e = event || window.event;
            var target = e.target;
    
        if (target.tagName.toLowerCase() != "span") return;
    
        var id_click = target.id;
        var pos = document.getElementById(id_click).offsetLeft;
        if (id_click == "btn1") pos = 0;
        else if (id_click == "btn2") pos -= 526 * 2;
        else if (id_click == "btn3") pos -= 593 * 3;
        else pos = 247;
        this.container.style.left = pos + "px";
      }
    }</code></pre><pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    

    position: absolute;
    margin: 0 auto;
    width: 780px;
    height: 280px;
    padding-left: 160px;
    }
    .prev {
    float: left;
    width: 5%;
    height: 50%;
    background: red;
    cursor: pointer;
    }
    .photo {
    float: left;
    width: 780px;
    height: 280px;
    background: yellow;
    overflow: hidden;
    }
    .next {
    float: left;
    width: 5%;
    height: 50%;
    background: red;
    cursor: pointer;
    }
    .prev:hover,
    .next:hover {
    background: green;
    }
    .container-photo {
    width: 780px;
    height: 280px;
    -webkit-transition: all 1s;
    transition: all 1s;
    position: relative;
    }
    .image-block {
    width: 780px;
    height: 280px;
    float: left;
    background: pink;
    z-index: 1;
    }
    .clear {
    clear: both;
    }
    .rds {
    padding: 10px;
    line-height: 150%;
    width: 100%;
    text-align: center;
    }
    .rds-bl {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    cursor: pointer;
    margin: 4px;
    background: green;
    display: inline-block;
    }

    <!DOCTYPE HTML>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <head>
    <title>--------------------</title>
    <meta charset="utf-8">
    <link rel="icon" href="images/icon.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="container/swap.css">
    <script type="text/javascript" src="container/swap.js"></script>
    <script>
    window.onload = function() {
    gallery.init(3);
    }
    </script>
    </head>

    <body>
    <div id="container">
    <div class="photo">
    <div class="container-photo" id="container_image">
    <div class="image-block" id="image_block">
    <span>Здесь может быть image, ссылки и прочее #1</span>
    </div>
    <div class="image-block">
    <span>Здесь может быть image, ссылки и прочее #2</span>
    </div>
    <div class="image-block">
    <span>Здесь может быть image, ссылки и прочее #3</span>
    </div>
    <div class="clear"></div>
    </div>
    </div>
    <div class="clear"></div>
    <div class="rds" onclick="gallery.slide(event)">
    <span class="rds-bl" id="btn1"></span>
    <span class="rds-bl" id="btn2"></span>
    <span class="rds-bl" id="btn3"></span>
    </div>
    </div>
    </body>

    </html>

    Here's the violin from the site:
    введите сюда описание изображения

    But there's nothing on the website, nothing happens. If you expand the block, it's possible that all units of the show are built vertically.



  • When you connect. <script>, get him on the bottom. html as in the bottom example:

    <!DOCTYPE HTML>
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    

    <head>
    <title>--------------------</title>
    <meta charset="utf-8">
    <link rel="icon" href="images/icon.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="container/swap.css">
    <script type="text/javascript" src="container/swap.js"></script>

    </head>

    <body>
    <style>
    #container {
    position: absolute;
    margin: 0 auto;
    width: 780px;
    height: 280px;
    padding-left: 160px;
    }
    .prev {
    float: left;
    width: 5%;
    height: 50%;
    background: red;
    cursor: pointer;
    }
    .photo {
    float: left;
    width: 780px;
    height: 280px;
    background: yellow;
    overflow: hidden;
    }
    .next {
    float: left;
    width: 5%;
    height: 50%;
    background: red;
    cursor: pointer;
    }
    .prev:hover,
    .next:hover {
    background: green;
    }
    .container-photo {
    width: 780px;
    height: 280px;
    -webkit-transition: all 1s;
    transition: all 1s;
    position: relative;
    }
    .image-block {
    width: 780px;
    height: 280px;
    float: left;
    background: pink;
    z-index: 1;
    }
    .clear {
    clear: both;
    }
    .rds {
    padding: 10px;
    line-height: 150%;
    width: 100%;
    text-align: center;
    }
    .rds-bl {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    cursor: pointer;
    margin: 4px;
    background: green;
    display: inline-block;
    }

    </style>
    <div id="container">
    <div class="photo">
    <div class="container-photo" id="container_image">
    <div class="image-block" id="image_block">
    <span>Здесь может быть image, ссылки и прочее #1</span>
    </div>
    <div class="image-block">
    <span>Здесь может быть image, ссылки и прочее #2</span>
    </div>
    <div class="image-block">
    <span>Здесь может быть image, ссылки и прочее #3</span>
    </div>
    <div class="clear"></div>
    </div>
    </div>
    <div class="clear"></div>
    <div class="rds" onclick="gallery.slide(event)">
    <span class="rds-bl" id="btn1"></span>
    <span class="rds-bl" id="btn2"></span>
    <span class="rds-bl" id="btn3"></span>
    </div>
    </div>
    <script>
    window.onload = function() {
    gallery.init(3);
    }
    var gallery = {
    cnt: 0,
    container: document.getElementById("container_image"),
    timer: null,
    rds: "btn1",
    pos: 0,
    top: 1,
    init: function(i) {
    this.cnt = i;
    this.container.style.width = i * 700 + "px";
    this.timer = setInterval(function() {
    gallery.start();
    }, 1500);
    },
    start: function() {
    if (this.top == 1) {
    this.pos = 0;
    this.top += 1;
    document.getElementById("btn1").style.backgroundColor = "red";
    document.getElementById("btn2").style.backgroundColor = "green";
    document.getElementById("btn3").style.backgroundColor = "green";
    } else if (this.top == 2) {
    this.pos -= 350 * 2;
    this.top += 1;
    document.getElementById("btn1").style.backgroundColor = "green";
    document.getElementById("btn2").style.backgroundColor = "red";
    document.getElementById("btn3").style.backgroundColor = "green";
    } else if (this.top == 3) {
    this.pos -= 350 * 2;
    this.top = 1;
    document.getElementById("btn1").style.backgroundColor = "green";
    document.getElementById("btn2").style.backgroundColor = "green";
    document.getElementById("btn3").style.backgroundColor = "red";
    }
    this.container.style.left = this.pos + "px";
    },
    slide: function(event) {
    var e = event || window.event;
    var target = e.target;

        if (target.tagName.toLowerCase() != "span") return;
    
        var id_click = target.id;
        var pos = document.getElementById(id_click).offsetLeft;
        if (id_click == "btn1") pos = 0;
        else if (id_click == "btn2") pos -= 526 * 2;
        else if (id_click == "btn3") pos -= 593 * 3;
        else pos = 247;
        this.container.style.left = pos + "px";
      }
    }
    

    </script>
    </body>

    </html>

    Or you'll take it all. js In a separate phaser and put it on the sky like this.

    <script type="text/javascript" src="foo.js"></script>
    </body>
    </html>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2