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.htmlas 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.
jsIn a separate phaser and put it on the sky like this.<script type="text/javascript" src="foo.js"></script>
</body>
</html>
