I made a little slider to loop 3 images, I want every image stop 3 seconds, then fadeOut and fadeIn the next one, but the problem is :
the first one can stay 3 seconds, but once it begins to loop, it won't stop 3 seconds again, the image change immediately, why it can't keep the 3 seconds to stay?
Here is the Demo
var i = 0;
var name = ['Cat', 'Dog', 'Duck'];
function next() {
if (i > 1) {
i = 0;
} else {
i++;
};
$('#loop').fadeOut(1000, function() {
$(this).css('background', 'url("' + i + '.png")').fadeIn(1000);
$('h1').html(name[i]);
});
};
setInterval(next, 3000);
#loop {
width: 300px;
height: 300px;
background: url('0.png');
}
h1 {
padding-top: 310px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loop">
<h1>Cat</h1>
</div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Loop</title>
<style type="text/css">
#loop{
width: 300px;
height: 300px;
background: url('0.png');
}
h1{
padding-top: 310px;
text-align: center;
}
</style>
</head>
<body>
<div id="loop">
<h1>Cat</h1>
</div>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"
integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="
crossorigin="anonymous">
</script>
<script>
$(function (){
var i = 0;
var name = ['Cat', 'Dog', 'Duck'];
var timerId = setTimeout(next, 3000);
function next(){
if (i > 1) {
i = 0;
}else{
i++;
};
$('#loop').fadeOut(1000, function (){
$(this).css('background', 'url("'+ i +'.png")').fadeIn(1000);
$('h1').html(name[i]);
timerId = setTimeout(next, 3000);
});
};
});
</script>
</body>
</html>
You can use .queue(), .delay(), .promise(), recursion
$(function() {
var names = ['Cat', 'Dog', 'Duck'];
var images = ["http://placehold.it/300x300?text=Cat"
, "http://placehold.it/300x300?text=Dog"
, "http://placehold.it/300x300?text=Duck"]
function next() {
return $("#loop")
.queue("names", $.map(names, function(name, i) {
return function(next) {
$(this).css("background", "url(" + images[i] + ")")
.find("h1").html(name).end()
.fadeIn(1000, function() {
$(this).delay(3000)
.fadeOut(1000).promise().then(next)
})
}
}))
.dequeue("names").promise("names").then(next)
};
next();
})
#loop {
width: 300px;
height: 300px;
background-repeat:no-repeat;
}
h1 {
padding-top: 310px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loop">
<h1>Cat</h1>
</div>
Related
I want to create a text that can be shifted for long title.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#abc {
position: relative;
overflow: hidden;
width: 200px;
height: 100px;
}
#def {
position: absolute;
font-size: 2em;
color: #000;
margin: 0;
width: 400px;
}
</style>
<script>
var teks = null;
function geser() {
var left = 0;
function frame() {
left--; // update parameter
teks.style.left = left + 'px';
if (left == -200) {
clearInterval(id);
setTimeout(function() {
runningtext();
}, 2000);
}
}
var id = setInterval(frame, 40)
}
function runningtext() {
teks = document.getElementById("def");
teks.style.left = '0px';
setTimeout(function() {
geser();
}, 2000);
}
window.onload = runningtext;
</script>
</head>
<body>
<div id="abc">
<p id="def">Cihampelas Demin Center</p>
</div>
</body>
</html>
The script is successfully work with 1 line.
Output :
Cihampelas Demin Center
Question is :
Is there another way to print 1 line without #def { width:400px; }?
(When I try #def { display:inline; }
Output :
Cihampelas
Demin Center
)
When object's left = -200px, I want to reserve in same way, but I have no idea.
I'm trying to create a parallax effect with a simple slideshow that I made.
First, I have one with just the basic parallax.js implementation:
fiddle: https://jsfiddle.net/jzhang172/bcdkvqtq/1/
.parallax-window {
min-height: 400px;
position:relative;
}
.ok{
font-size:50px;
background:gray;
color:blue;
height:300px;
width:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="parallax-window" data-parallax="scroll" data-image-src="http://vignette4.wikia.nocookie.net/pokemon/images/5/5f/025Pikachu_OS_anime_11.png/revision/latest?cb=20150717063951g">
</div>
<div class="ok">Hey there</div>
This works, however, now I want this effect on image slideshow, with or without parallax.js is fine but I would like the same parallax effect:
I'm not sure how to apply it to the images:
fiddle: https://jsfiddle.net/jzhang172/k4fygvhg/1/
$(document).ready(function() {
var slides = $('.featured-wrapper img');
var slideAtm = slides.length;
var currentPos = 0;
slides.hide();
function roll(){
var slide = slides.eq(currentPos);
slide.fadeIn(2000);
setTimeout(up,1500);
}
roll();
function up(){
currentPos +=1;
slides.fadeOut(1500);
setTimeout(roll, 500);
if(currentPos > slideAtm -1){
currentPos = 0;
}
}
});
.featured-wrapper img{
max-width:200%;
max-height:200%;
min-width:100vw;
}
.featured-wrapper{
height:500px;
width:100%;
overflow:hidden;
}
.things{
font-size:50px;
height:500px;
width:100%;
background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="featured-wrapper" data-parallax="scroll">
<img src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png" alt="">
<img src="http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png" alt="">
<img src="https://assets.pokemon.com/static2/_ui/img/account/sign-up.png" alt="">
<img src="http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png" alt="">
<img src="http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png" alt="">
</div>
<div class="things">I'm the stuff underneath</div>
My proposal is to preload the images and, using the complete events of fadeIn / fadeOut instead of setTimeOut.
I hope this could help you.
var imagesArray = ["http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png",
"http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png",
"https://assets.pokemon.com/static2/_ui/img/account/sign-up.png",
"http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png",
"http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png"];
function preloadImg(pictureUrls, callback) {
var i, j, loaded = 0;
var imagesArray = [];
for (i = 0, j = pictureUrls.length; i < j; i++) {
imagesArray.push(new Image());
}
for (i = 0, j = pictureUrls.length; i < j; i++) {
(function (img, src) {
img.onload = function () {
if (++loaded == pictureUrls.length && callback) {
callback(imagesArray);
}
};
img.src = src;
}(imagesArray[i], pictureUrls[i]));
}
};
function roll(imagesArray, currentPos, max){
if (max < 0) {
return;
}
var slide = $('.parallax-mirror').find('img').attr('src', imagesArray[currentPos].src);
slide.fadeIn(2000, function() {
slide.fadeOut(1500, function() {
currentPos++;
if(currentPos >= imagesArray.length){
currentPos = 0;
max--;
}
roll(imagesArray, currentPos, max);
});
});
}
$(function () {
preloadImg(imagesArray, function (imagesArray) {
roll(imagesArray, 0, 3);
});
});
.parallax-window {
min-height: 400px;
position:relative;
}
.ok {
font-size:50px;
background:gray;
color:blue;
height:500px;
width:100%;
}
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="parallax-window" data-parallax="scroll"
data-image-src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
</div>
<div class="ok">I'm the stuff underneath</div>
Parallax effects are easy to maintain if you conceptually boil them down to their basics. I've added 2 lines of code to your project which (hopefully) will provide you with the result you're after.
The code I added was
.featured-wrapper img{
z-index: -1;
position: fixed;
}
https://jsfiddle.net/simonstern/k4fygvhg/6/
Try this, Hope this Helps..:)
fiddle link https://jsfiddle.net/e05m68wd/1/
$(document).ready(function() {
var imgSrc = ["https://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png", "https://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png", "https://assets.pokemon.com/static2/_ui/img/account/sign-up.png"];
var counter = 1;
var duration = 2000;
var tTime = 300;
var v = setInterval(function() {
$('.parallax-mirror').animate({
'opacity': 0
}, {
duration: tTime,
complete: function() {
$(this).find('img').attr('src', imgSrc[counter]).end().animate({
'opacity': 1
}, tTime);
}
});
if (counter > imgSrc.length - 1) {
counter = 0
} else {
counter++
};
},
duration);
});
.featured-wrapper {
height: 500px;
width: 100%;
overflow: hidden;
}
.things {
font-size: 50px;
height: 500px;
width: 100%;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="featured-wrapper" data-parallax="scroll" data-image-src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
</div>
<div class="things">I'm the stuff underneath</div>
How to make sure that when you change the background color from the in the same tab, the background color would be changed in the other? Now the background color changes when the page is reloaded. I want to do that when digging the two identical tabs, and update one of them would have changed the background and the other.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Untitled</title>
<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.bg-1 {
background: chocolate;
}
.bg-2 {
background: aqua;
}
.bg-3 {
background: grey;
}
h1 {
color: white;
font-size: 3em;
}
</style>
</head>
<body>
<h1>Change the background color of the page when you reload.</h1>
<script>
var body = document.body,
currentStyle = +localStorage.currentStyle || 0;
window.addEventListener('load', function() {
body.classList.add('bg-' + (currentStyle + 1));
localStorage.currentStyle = ++currentStyle % 3;
});
window.addEventListener('storage', function( event ) {
body.classList.remove('bg-' + event.oldValue);
body.classList.add('bg-' + (currentStyle + 1));
console.log(event.key);
});
</script>
</body>
</html>
This is the code you are looking for:
<script type="text/javascript">
var body = document.body;
window.addEventListener('load', function () {
var currentStyle = localStorage.getItem('currentStyle'),
newStyle=1;
if (currentStyle !== null) {
newStyle = currentStyle % 3 + 1;
}
body.classList.add('bg-' + newStyle);
localStorage.setItem('currentStyle', newStyle);
});
window.addEventListener('storage', function (event) {
var currentStyle = localStorage.getItem('currentStyle');
body.classList.remove('bg-' + event.oldValue);
body.classList.add('bg-' + currentStyle);
});
</script>
HTML:
<div id="container">
<div id="bar">
</div>
</div>
CSS:
#container {
width: 20px;
height: 150px;
position: relative;
}
#bar {
width: 100%;
height: 100%;
background-color: red;
position: absolute;
bottom: 0px;
}
JS:
function Bar(element) {
this.barEl = element;
this.progress = 100;
}
Bar.prototype.setProgress = function (p) {
if(p >= 0) {
this.progress = p;
this.barEl.style.height = this.progress + "%";
}
}
var barObj = new Bar(document.getElementById('bar'));
setInterval(function () {
barObj.setProgress(barObj.progress - 10);
}, 1000);
This code from jsfiddle http://jsfiddle.net/Mp7R3/ is not working when I copy paste the code but it is working fine on jsfiddle .maybe I have some onLoad problem but I dont know how to solve it . I tried $(document).ready(function() but it didnt help .
Be sure you don't forget the script for calling jQuery in the <head> of your code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
You can also try to place the code at the bottom of your code so it's can run only if the full page is loaded.
I also write below the simplest page to make this code work (normally you should separate HTML, CSS and JS), so you can compare it with your own:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<title>- That's Work!!! -</title>
<style>
#container {
width: 20px;
height: 150px;
position: relative;
}
#bar {
width: 100%;
height: 100%;
background-color: red;
position: absolute;
bottom: 0px;
}
</style>
</head>
<body>
<div id="container">
<div id="bar">
</div>
</div>
</body>
<script type="text/javascript">
function Bar(element) {
this.barEl = element;
this.progress = 100;
}
Bar.prototype.setProgress = function (p) {
if(p >= 0) {
this.progress = p;
this.barEl.style.height = this.progress + "%";
}
}
var barObj = new Bar(document.getElementById('bar'));
setInterval(function () {
barObj.setProgress(barObj.progress - 10);
}, 1000);
</script>
</html>
I hope it will help you!
This question already exists:
Closed 10 years ago.
Possible Duplicate:
trying to create simple Slide show method in Javascript
I have learn to make carousel image slideshow script with JavaScript. I think it's better to learn it from the basic than we just make something from the framework (instant script) but I'm a newbie. I write this script using my technique, but I think it's terrible.
OK, here is my question :
I don't know how to make this slideshow loop, anyone can help me?
Thanks
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrapper {
width:400px;
height:140px;
position:absolute;
left:50%;
top:50%;
margin: -70px 0 0 -200px;
background: #383838;
overflow: hidden;
}
#abc-container {
position: absolute;
width:1200px;
height:140px;
}
#a {
width:400px;
height:140px;
background: #FF0000;
float: left;
}
#b {
width:400px;
height:140px;
background: #FFFF00;
float: left;
}
#c {
width:400px;
height:140px;
background: #00FFFF;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="abc-container">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</div>
<div id="asas"></div>
<div id="asass"></div>
<script type="text/javascript">
var runCarousel, runTimer;
firstval = 0;
secondval = 0;
function Carousel(){
firstval += 10;
document.getElementById('abc-container').style.left = "-" + firstval + "px";
document.getElementById('asas').innerHTML = "-" + firstval;
if(firstval == 400)
{
StopRun();
StartTimer()
return;
}
if(firstval == 800)
{
StopRun();
StartTimer()
return;
}
runCarousel = setTimeout(Carousel, 10);
}
function StartTimer(){
secondval += 1;
document.getElementById('asass').innerHTML = "-" + secondval;
if(secondval == 10)
{
StopTimer();
Carousel();
return;
}
if(secondval == 20)
{
StopTimer();
Carousel();
return;
}
runTimer = setTimeout(StartTimer, 1000);
}
function StopRun(){
window.clearTimeout(runCarousel);
}
function StopTimer(){
window.clearTimeout(runTimer);
}
function firstStart(){
setTimeout("Carousel()", 10000);
}
firstStart();
</script>
</body>
</html>
Firstly there is an error:
function firstStart(){
setTimeout("Carousel()", 10000);
}
correctly:
function firstStart(){
setTimeout(Carousel, 10000);
}
in the end, all settings are reset to default and start timer:
in Carousel:
if(firstval == 1200){
document.getElementById('abc-container').style.left = "0" + "px";
firstval = 0;
StopRun();
StartTimer()
return;
}
in StartTimer
if(secondval == 30) {
secondval = 0;
StopTimer();
Carousel();
return;
}
DEMO
Here is my example