Make a looping JavaScript Slideshow without jQuery [duplicate] - javascript

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

Related

How to make div reverse the animation on button toggle using javascript

The following code makes my div slide from right to left in my screen. I want to reverse the animation on second button click . But this simply makes my div disappear and appear instantaneously without any animation.Function slider3 is my failed attempt at reversing the animation. The login box right margin is initially -570px .
function call_slider() {
setTimeout("slider()", 50)
}
function slider() {
var label = document.getElementById("container1");
if (label.style.display == 'block') {
alert('this Element is block');
document.getElementById("login_box").style.right = "-570px";
label.style.display = "none";
} else {
alert('this Element is hidden');
setInterval(slider2, 10);
label.style.display = "block";
}
}
function slider2() {
if (document.getElementById("login_box").style.right != "10px") {
document.getElementById("login_box").style.right = parseInt(document.getElementById("login_box").style.right || 0) + 10 + 'px';
}
}
function slider3() {
if (document.getElementById("login_box").style.left != "-570px") {
document.getElementById("login_box").style.left = parseInt(document.getElementById("login_box").style.left || 0) + 10 + 'px';
}
}
.login-box {
width: 320px;
position: absolute;
top: 0px;
margin: 0;
background: white;
padding: 0 0 0 0;
}
.container1 {
width: 100%;
height: 100%;
overflow: hidden;
display: none;
display: flex;
justify-content: flex-end;
opacity: 0.9;
}
<div class="container1" id="container1" style="height:900px;position:absolute; z-index: 1;">
<form method="post" id="myform" onsubmit="mySubmit() " style="">
{% csrf_token %}
<div class="login-box" id="login_box" style=" right:-570px;">
</div>
</form>
</div>
Changes are commented in your code
function call_slider() {
setTimeout("slider()", 50)
}
function slider() {
var label = document.getElementById("container1");
if (label.style.display == 'block') {
alert('this Element is block');
//replaced your code with slider 3 function
//assign interval function as a proprty of global window so it can be accessed by another function
window.moveRight = setInterval(slider3, 10);
} else {
alert('this Element is hidden');
//make your element visible before start animation
label.style.display = "block";
window.moveLeft = setInterval(slider2, 10);
}
}
function slider2() {
//parse the right property as integer
var right = parseInt(document.getElementById("login_box").style.right,10)
if ( right < 10) {
document.getElementById("login_box").style.right = right + 10 + 'px';
} else {
//important -- cancel the interval after animation finished else it will run infinitely and interfere with other other functions
clearInterval(window.moveLeft)
}
}
function slider3() {
//user right here instead of left
//use the same property in other animation
var right = parseInt(document.getElementById("login_box").style.right,10)
if ( right > -570) {
document.getElementById("login_box").style.right = right - 10 + 'px';
} else {
// This is where you get stuck
// in your code the container element is hidden before animation is performed therefore you didn't see box moving to right
//hide container1 element only after entire login-box is moved to right
var label = document.getElementById("container1").style.display = "none";
clearInterval(window.moveRight)
}
}
.login-box{
width:320px;
position: absolute;
top : 0px;
margin: 0 ;
background:red;
padding:0 0 0 0 ;
height : 100px;
}
.container1{
width:100%;
height: 100%;
overflow:hidden;
display:none;
display:flex;
justify-content:flex-end;
opacity: 0.9;
}
<div class="container1" id="container1" >
<form method="post" id="myform" onsubmit="mySubmit() " style="">
<div class = "login-box" id="login_box" style=" right:-570px;">
</div>
</form>
</div>
<!-- Button for performing animation -->
<button onclick="call_slider()" >Show/Hide Login Box</button>

JS Why the loop don't keep the same interval time?

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>

Using Parallax with Image Slideshow

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>

Background image transition using jQuery

I made a little jQuery code that changes the background image in the box.
HTML
<div class="content-wrapper" id="box">
<div class="content">
CONTENT
</div>
</div>
jQUERY
slide=Math.floor((Math.random() * 6) + 1); slide=(slide==0?1:slide);
$("#box").attr("style", "background-image:url(images/slider/"+(slide)+".jpg);");
setInterval(function() {
$("#box").attr("style", "background-image:url(images/slider/"+(slide)+".jpg);");
slide++; if(slide>6) slide=1;
}, 6000
);
CSS
.content-wrapper{
display:table;
width:100%;
color:black;
text-align:center;
margin:0 0 0 0 !important;
padding:0px !important;
height:600px;
}
.content-wrapper > .content{
width:100%;
display: table-cell;
vertical-align:middle;
text-align:center;
font-size:36px;
font-weight:bold;
}
#box {
background-repeat: no-repeat;
background-position:center top;
background-attachment:fixed;
background-size:cover;
}
#box > .content{
background:rgba(0,0,0,0.5);
color:#FFF;
}
DEMO
My idea is when page is loaded each time show random pictures and start slide that changes image every 6 seconds. All this works nicely, but I do not know how to make a nice transition. fadeIn() or fadeOut() is out of the question because over the images I have fixed text content. I do not want to use too large libraries for background slider, so I'm interested in the simplest solution. Thank you very much.
so if you want to slide left and right Fiddle:Demo:
$(document).ready(function () {
var delay = 3000,
fade = 1000;
var banners = $('.banner');
var len = banners.length;
var i = 0;
setTimeout(cycle, delay);
function cycle() {
$(banners[i % len]).hide("slide", function(){
$(banners[++i % len]).show("slide", {
direction: "left"
});
setTimeout(cycle, delay);
});
}
});
if you want to slide up and down : Fiddle
$(document).ready(function() {
var delay = 3000, fade = 1000;
var banners = $('.banner');
var len = banners.length;
var i = 0;
setTimeout(cycle, delay);
function cycle() {
$(banners[i%len]).slideUp(fade, function() {
$(banners[++i%len]).slideDown(fade, function() {
setTimeout(cycle, delay);
});
});
}
});
you can try to combine those to come up with a nice transition.

jQuery Image slider not working as expected

I have designed an image slider that slides through the pictures . But I want it also to display that specific image associated to that corresponding button user clicks on i.e. if user clicks 3rd button it would display the 3rd image and then it should slide on normally.
I have coded that but it is not working as expected in fact it is not working at all . can anyone point me out where am I doing wrong ?
and help me solve that?
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog: Hide the Close Button/Title Bar</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<style type="text/css">
.mySlider
{
width:800px;
height:480px;
overflow:hidden;
margin:40px auto;
background-image:url(Images/Loading.gif);
background-repeat:no-repeat;
background-position:center;
background-color:#fff;
}
.shadow_div
{
background-image:url(Images/shadow.png);
background-repeat:no-repeat;
background-position:top;
width:800px;
height:30px;
margin:-39px auto;
}
.mySlider img
{
width:800px;
height:480px;
display:none;
}
.Parent_Slider > a
{
text-decoration:none;
font-weight:bold;
width:32px;
height:32px;
position:absolute;
top:45%;
text-indent:-9999px;
display:block;
border:1px solid white;
}
.Next_Class
{
right: 282px;
background-image: url(Images/rightarrow.jpg);
}
.Prev_Class
{
left:282px;
background-image:url(Images/leftarrow.jpg);
}
ul.Round_Buttons
{
position:relative;
left:35%;
top:5px;
text-decoration:none;
list-style-type:none;
text-indent:-9999px
}
ul.Round_Buttons li
{
float:left;
background-color:white;
margin:1px 5px;
padding:0px 7px;
border-radius:50%;
border-width:1px;
border:1px solid #3610a5;
cursor:pointer;
box-shadow:1px -1px 3px 1px #3610a5;
transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
}
</style>
<script type="text/javascript">
var count = 1;
var temp_count = 0;
var _tempClicked = false;
$(document).ready(function () {
$(("#my_image_slider>#")+count).show("fade", 1000);
$(("#my_image_slider>#")+count).delay(3500).hide("slide", { direction: 'left' }, 800);
var image_count = $("#my_image_slider > img").length;//total number of images
$(".Round_Buttons li").click(function () {
temp_count = this.id.charAt(0);
_tempClicked = true;
});
count = count + 1;
setInterval(function () {
alert("In setinterval --- " + count);
$(("#my_image_slider #") + count).show("slide", { direction: 'right' }, 1000);
$(("#my_image_slider #") + count).delay(3500).hide("slide", { direction: 'left' }, 800);
if (count == image_count) {
count = 1;
alert("In first If -- " + count);
}
else if (_tempClicked == true) {
count = temp_count;
alert("In Else If " + count);
}
else {
count = count + 1;
alert("In else -- " + count);
}
}, 5300);
});
</script>
</head>
<body>
<div class="Parent_Slider">
<div id="my_image_slider" class="mySlider">
<img id="1" src="Images/bmw.jpg" alt="" title="Audi India"/>
<img id="2" src="Images/audi.jpg" alt="" title="BMW India" />
<img id="3" src="Images/aston-martin.jpg" alt="" title="Aston-Martin APAC" />
<img id="4" src="Images/bugatti.jpg" alt="" title="Buggatti APAC" />
<img id="5" src="Images/koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
</div>
Next
Prev
</div>
<div class="shadow_div" >
<ul class="Round_Buttons">
<li id="1_Round_Buttons">1</li>
<li id="2_Round_Buttons">2</li>
<li id="3_Round_Buttons">3</li>
<li id="4_Round_Buttons">4</li>
<li id="5_Round_Buttons">5</li>
</ul>
</div>
</body>
</html>
In your click function it is setting a value that is picked up later by setInterval, so it may appear to not work immediately. Also _tempClicked is not reset to false after it's checked in setInterval so you would never see the user's clicks after the first one.
For immediate UI response you can try something like this...
<script type="text/javascript">
var count = 1;
var _tempClicked = false;
$(document).ready(function () {
var image_count = $("#my_image_slider > img").length;//total number of images
increment_counter = function(){
if (count == image_count) {
count = 1;
}
else {
count = count + 1;
}
};
doslide = function(){
$("#my_image_slider>#"+count).show("fade", 1000);
$("#my_image_slider>#"+count).delay(3500).hide("slide", { direction: 'left' }, 800);
increment_counter();
};
doslide();
setInterval(function () {
doslide();
}, 5300);
$(".Round_Buttons li").click(function () {
count = parseFloat(this.id.charAt(0));
// hide currently visible image
$('#my_image_slider').children().each(function(index,obj) {
if( $(obj).css("visibility") != "hidden"){
$(obj).hide();
};
});
$("#my_image_slider>#"+count).show();
});
});
</script>
you have error in your code:
$(("#my_image_slider>#")+count)
this type of selector is wrong, instead use this type of selector
(you should remove inner parentheses):
$("#my_image_slider>#" + count )
NOTE: jQuery selector should be a string.

Categories

Resources