Making a jQuery carousel automatically slide - javascript

So I've created my image slider and it is set to slide when one of the buttons is clicked. But now I'm struggling to make the slide automatically and stop when the mouse hovers over the sider. Could you show me or at least tell me how to do this? Thanks
$(document).ready(function(){
var slide_count = $(".carousel li").length;
var slide_width = $(".carousel li").width();
var slide_height = $(".carousel li").height();
var cont_width = slide_width * slide_count;
$(".cont").css({ height: slide_height, width: slide_width});
$(".carousel").css({ width: cont_width, marginLeft: - slide_width });
$(".carousel li:last-child").prependTo(".carousel");
function next_slide(){
$(".carousel").animate({
left: + slide_width
}, 400, function(){
$(".carousel li:last-child").prependTo(".carousel");
$('.carousel').css('left', 0);
}
);
}
function prev_slide(){
$(".carousel").animate({
left: - slide_width
}, 400, function(){
$(".carousel li:first-child").appendTo(".carousel");
$(".carousel").css("left", 0);
}
);
}
$("#next").click(function(){
next_slide();
});
$("#prev").click(function(){
prev_slide();
});
});
*{
padding: 0;
margin: 0;
}
body{
margin: 0;
padding: 0;
}
.cont{
position: relative;
text-align: center;
font-size: 0;/*removes white space*/
margin: 60px auto 0 auto;
padding: 0;
overflow: hidden;
}
.carousel{
position: relative;
margin: 0;
padding: 0;
list-style-type: none;
height: 100%;
max-height: 600px;
}
.carousel li{
float: left;
width: 750px;
height: 350px;
}
.carousel li img{
width: 100%;
height: auto;
}
#next{
position: absolute;
top: 45%;
right: 0;
width: 40px;
height: 40px;
background-color: blue;
font-size: 0;
z-index: 1;
}
#prev{
position: absolute;
top: 45%;
left: 0;
width: 40px;
height: 40px;
background-color: blue;
z-index: 1;
}
<div class="cont">
<div id="next">
</div>
<div id="prev">
</div>
<ul class="carousel">
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-2.jpg" alt="" />
</li>
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-6.jpg" alt="" />
</li>
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-1.jpg" alt="" />
</li>
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-3.jpg" alt="" />
</li>
</ul>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>


You can achieve that by creating a setInterval() where you call your slider function every x seconds, and put a flag on it to not run if the mouse is over it.
Something like
var SECONDS_INTERVAL = 1000; // 1s
var mouseHoverFlag = false;
setInterval(function() {
if (!mouseHoverFlag) {
next_slide();
}
}, SECONDS_INTERVAL);
And change that mouseHoverFlag to true whenever the user has the mouse over the div that contains it.
$('.carousel').hover(function() {
mouseHoverFlag = true;
}, function () {
mouseHoverFlag = false;
});
You could use setTimeout and kill it every time that the mouse gets in but I think that's too heavy, performance wise.


Here is my edited version. We have to use setInterval function for automatic slide. Next we add hover event listener to carousel. If we are hovering, our variable preventSlide will change to true and if we stop hovering, variable will be changed back to false, which means auto slide.
var preventSlide = false;
$(".carousel").hover(function() {
preventSlide = true;
}, function() {
preventSlide = false;
});
setInterval(function () {
if (!preventSlide)
next_slide();
}, 3500);
$(document).ready(function(){
var slide_count = $(".carousel li").length;
var slide_width = $(".carousel li").width();
var slide_height = $(".carousel li").height();
var cont_width = slide_width * slide_count;
$(".cont").css({ height: slide_height, width: slide_width});
$(".carousel").css({ width: cont_width, marginLeft: - slide_width });
$(".carousel li:last-child").prependTo(".carousel");
function next_slide(){
$(".carousel").animate({
left: + slide_width
}, 400, function(){
$(".carousel li:last-child").prependTo(".carousel");
$('.carousel').css('left', 0);
}
);
}
function prev_slide(){
$(".carousel").animate({
left: - slide_width
}, 400, function(){
$(".carousel li:first-child").appendTo(".carousel");
$(".carousel").css("left", 0);
}
);
}
var preventSlide = false;
$(".carousel").hover(function() {
preventSlide = true;
}, function() {
preventSlide = false;
});
setInterval(function () {
if (!preventSlide)
next_slide();
}, 3500);
/*$("#next").click(function(){
next_slide();
});
$("#prev").click(function(){
prev_slide();
});*/
});
*{
padding: 0;
margin: 0;
}
body{
margin: 0;
padding: 0;
}
.cont{
position: relative;
text-align: center;
font-size: 0;/*removes white space*/
margin: 60px auto 0 auto;
padding: 0;
overflow: hidden;
}
.carousel{
position: relative;
margin: 0;
padding: 0;
list-style-type: none;
height: 100%;
max-height: 600px;
}
.carousel li{
float: left;
width: 750px;
height: 350px;
}
.carousel li img{
width: 100%;
height: auto;
}
#next{
position: absolute;
top: 45%;
right: 0;
width: 40px;
height: 40px;
background-color: blue;
font-size: 0;
z-index: 1;
}
#prev{
position: absolute;
top: 45%;
left: 0;
width: 40px;
height: 40px;
background-color: blue;
z-index: 1;
}
<div class="cont">
<div id="next">
</div>
<div id="prev">
</div>
<ul class="carousel">
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-2.jpg" alt="" />
</li>
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-6.jpg" alt="" />
</li>
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-1.jpg" alt="" />
</li>
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-3.jpg" alt="" />
</li>
</ul>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>


You should add a setInterval and clearInterval for automatic slide. Also it is good to calculate which slide you are in at the current animation. Briefly,
var timer;
var rotator = function(){
nextSlide();
};
timer = setInterval(rotator, 5000); // your desired timer
$('.carousel').hover(function(){ clearInterval(timer), function(){ timer = setInterval(rotator, 5000); });
you can optimize the code far better, but the basic solution is like this.


$(function(){
setInterval(function () {
moveRight();
}, 3000);
});
check here


You can set the time interval as an option in the carousel. You can also set the pause option on hover.
$("#myCarousel").carousel({interval: 500, pause: "hover"});

Related

How i will add a time limit of pop up image

When click on the small image it will open as pop-up for 15 seconds, and then automatically opens the second one.
Is it possible to add certain time limit of pop-up image and after that the next image will open? closely same with Whatsapp or Facebook status.
Here is my HTML, CSS and JavaScript code:
$(function () {
"use strict";
$(".popup img").click(function () {
var $src = $(this).attr("src");
$(".show").fadeIn();
$(".img-show img").attr("src", $src);
});
$("span, .overlay").click(function () {
$(".show").fadeOut();
});
});
.popup{
width: 900px;
margin: auto;
text-align: center
}
.popup img{
width: 200px;
height: 200px;
cursor: pointer
}
.show{
z-index: 999;
display: none;
}
.show .overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.66);
position: absolute;
top: 0;
left: 0;
}
.show .img-show{
width: 600px;
height: 400px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
overflow: hidden
}
.img-show span{
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
cursor: pointer;
}
.img-show img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/*End style*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup">
<img src="http://images.entertainment.ie/images_content/rectangle/620x372/success-kid.jpg">
<img src="https://pbs.twimg.com/media/CX1PAZwVAAANemW.jpg">
<img src="http://images5.fanpop.com/image/photos/30900000/beautiful-pic-different-beautiful-pictures-30958249-1600-1200.jpg">
</div>
<div class="show">
<div class="overlay"></div>
<div class="img-show">
<span>X</span>
<img src="">
</div>
</div>
<!--End image popup-->
Thank you.

window.onload = function() {
setTimeout(function() {
document.getElementById('mydiv').style.display = 'block';
}, 10000);
}

You can use this code but I guess you can easily find more examples for this on google.
$(function() {
"use strict";
var timeOut;
var intervalMs = 15000;
$(".popup img").click(function() {
var src = $(this).attr("src");
$(".show").fadeIn();
$(".img-show img").attr("src", src);
if (timeOut != null)
clearTimeout(timeOut);
var that = $(this);
timeOut = setTimeout(function() {
if (that.next() == null)
that.siblings().first().click();
else
that.next().click();
}, intervalMs);
});
$("span, .overlay").click(function() {
clearTimeout(timeOut);
$(".show").fadeOut();
});
});

Scroll function on hover won't work unless resizing screen

I miss 1% to finish my script, I just don't know how to do it :D
When you hover over the target to the left, you can see the image will scroll. But after clicking on a new image it won't. I then have to resize the window to make it work again. How to fix that? Below is my code but for a working example, here's a CodePen
(function($) {
// virables
var layoutContainer = '.container';
var layoutTarget = '#target';
var layoutTargetIMG = '#target img';
var layoutIMG = '.container .gallery .item img';
var layoutIMGFirst = '.container .gallery .item:first-child img';
// Add first image to target
$(layoutIMGFirst).clone().appendTo(layoutTarget);
// Add image to target when click on gallery image
$(layoutIMG).click(function() {
$(this).closest(layoutContainer).find(layoutTarget).empty();
$(this).clone().appendTo(
$(this).closest(layoutContainer).find(layoutTarget)
);
});
// Image scroll on hover
// This won't work after clicking on an image unless resizing the browser
$(window).resize(function() {
// If i remove this it won't work on the start image.
// Any other solution?
setTimeout(function() {
$('#target img').each(function() {
var itemHeight = $('#target').outerHeight();
var imgHeight = $(this).outerHeight();
// Work out what percentage the image is of the item and remove 100% from that
var topHeight = (imgHeight / itemHeight) * 100 - 100;
//Make the animation speed proptional to that ratio
var animationSpeed = (imgHeight / itemHeight) / 1; //change 2 to tweak the speed
$(this).css({
transition: 'all ease ' + animationSpeed + 's'
});
$(this).mouseleave(function() {
$(this).css({
top: '0'
});
})
// The 'top' property of the image needs
// to be set as as a percentage of the parent
$(this).mouseenter(function(e) {
$(this).css({
top: '-' + topHeight + '%',
});
})
});
}, 200);
});
$(document).ready(function() {
setTimeout(function() { // Add delay after resize so function will load
$(window).triggerHandler('resize');
}, 200);
});
})(jQuery);
.container {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
margin-left: -40px;
max-width: 1000px;
background: lightblue;
padding: 20px;
.column {
flex: 1;
min-width: 30%;
margin-left: 40px;
.target {
height: 400px;
background: pink;
position: relative;
overflow: hidden;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
}
.cta {
display: flex;
a {
background: lightgreen;
width: 50%;
padding: 16px 8px;
;
text-align: center;
justify-content: center;
text-decoration: none;
&:last-child {
background: orange;
}
}
}
.gallery {
display: flex;
flex-flow: row wrap;
margin-left: -4px;
.item {
flex: 1;
margin-left: 4px;
position: relative;
overflow: hidden;
&::before {
content: '';
padding-top: 80%;
display: block;
}
img {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="column">
<div id="target" class="target"></div>
<div class="cta">
SE DEMO
KØB LAYOUT
</div>
</div>
<div class="column">
<div class="gallery">
<div class="item">
<img src="https://picsum.photos/600/1200" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/500/1600" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/400/2000" alt="">
</div>
</div>
</div>
</div>

Just change this
$(layoutIMG).click(function() {
$(this).closest(layoutContainer).find(layoutTarget).empty();
$(this).clone().appendTo(
$(this).closest(layoutContainer).find(layoutTarget)
);
});
to
$(layoutIMG).click(function() {
$(this).closest(layoutContainer).find(layoutTarget).empty();
$(this).clone().appendTo(
$(this).closest(layoutContainer).find(layoutTarget)
);
$(window).triggerHandler('resize'); // added this line
});

Custom jQuery carousel transition bug

I am working on a custom image carousel, with jQuery and CSS. I am trying to avoid using a multiple-features carousel plugin download from Github, for performance reasons.
My aim is to obtain a vertical transition, like the one on www.pcgarage.ro, but without using the plugin they (might) have used. For this purpose, I have written:
var $elm = $('.slider'),
$slidesContainer = $elm.find('.slider-container'),
slides = $slidesContainer.children('a'),
slidesCount = slides.length,
slideHeight = $(slides[0]).find('img').outerHeight(false);
//Set slide height
$(slides).css('height', slideHeight);
// Append bullets
for (var i = 0; i < slidesCount; i++) {
var bullets = '' + i + '';
if (i == 0) {
// active bullet
var bullets = '' + i + '';
// active slide
$(slides[0]).addClass('active');
}
$('.slider-nav').append(bullets);
}
// Set (initial) z-index for each slide
var setZindex = function() {
for (var i = 0; i < slidesCount; i++) {
$(slides[i]).css('z-index', slidesCount - i);
}
}
setZindex();
$('.slider-nav a').on('click', function() {
activeIdx = $(this).text();
$('.slider-nav a').removeClass('activeSlide');
$(this).addClass('activeSlide');
setActiveSlide();
slideUpDown();
});
var setActiveSlide = function() {
$(slides).removeClass('active');
$(slides[activeIdx]).addClass('active');
}
var slideUpDown = function() {
// set top property for all the slides
$(slides).css('top', slideHeight);
// then animate to the next slide
$(slides[activeIdx]).animate({
'top': 0
});
}
body {
margin: 0;
padding: 0;
}
body * {
box-sizing: border-box;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.slider {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
.slider .slider-nav {
position: absolute;
left: 10px;
bottom: 10px;
z-index: 30;
}
.slider .slider-nav a {
display: block;
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 3px;
text-indent: -9999px;
background: #fff;
}
.slider .slider-nav a.activeSlide {
background: transparent;
border: 2px solid #fff;
}
.slider .slider-container {
width: 100%;
text-align: center;
}
.slider .slider-container a {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.slider .slider-container img {
transform: translateX(-50%);
margin-left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider slider-homepage">
<div class="slider-nav"></div>
<div class="slider-container">
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</a>
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</a>
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=north" alt="">
</a>
</div>
</div>
</div>
The problem with my code is the (obvious) white screen that accompanies every transition, whose cause I do not understand.
Where is my mistake?

I have added some variable and function to fix this issue kindly check the script.
var $elm = $('.slider'),
$slidesContainer = $elm.find('.slider-container'),
slides = $slidesContainer.children('a'),
slidesCount = slides.length,
slideHeight = $(slides[0]).find('img').outerHeight(false);
//Set slide height
$(slides).css('height', slideHeight);
// Append bullets
for (var i = 0; i < slidesCount; i++) {
var bullets = '' + i + '';
if (i == 0) {
// active bullet
var bullets = '' + i + '';
// active slide
$(slides[0]).addClass('active');
}
$('.slider-nav').append(bullets);
}
// Set (initial) z-index for each slide
var setZindex = function () {
for (var i = 0; i < slidesCount; i++) {
$(slides[i]).css('z-index', slidesCount - i);
}
}
setZindex();
var displayImageBeforeClick = null;
$('.slider-nav a').on('click', function () {
displayImageBeforeClick = $(".slider-container .active");
activeIdx = $(this).text();
if($(slides[activeIdx]).hasClass("active")){ return false; }
$('.slider-nav a').removeClass('activeSlide');
$(this).addClass('activeSlide');
setActiveSlide();
slideUpDown();
});
var setActiveSlide = function () {
$(slides).removeClass('active');
$(slides[activeIdx]).addClass('active');
}
var slideUpDown = function () {
// set top property for all the slides
$(slides).not(displayImageBeforeClick).css('top', slideHeight);
// then animate to the next slide
$(slides[activeIdx]).animate({
'top': 0
});
$(displayImageBeforeClick).animate({
'top': "-100%"
});
}
body {
margin: 0;
padding: 0;
}
body * {
box-sizing: border-box;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.slider {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
.slider .slider-nav {
position: absolute;
left: 10px;
bottom: 10px;
z-index: 30;
}
.slider .slider-nav a {
display: block;
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 3px;
text-indent: -9999px;
background: #fff;
}
.slider .slider-nav a.activeSlide {
background: transparent;
border: 2px solid #fff;
}
.slider .slider-container {
width: 100%;
text-align: center;
}
.slider .slider-container a {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.slider .slider-container img {
transform: translateX(-50%);
margin-left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider slider-homepage">
<div class="slider-nav"></div>
<div class="slider-container">
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</a>
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</a>
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=north" alt="">
</a>
</div>
</div>
</div>

Add Transition to your ".slider .slider-container a" with a transition-duration and transition-timing-function.... for reference you can see https://www.w3schools.com/css/css3_transitions.asp

How to move two different images across the screen using JavaScript

I have been challenged with a website that requires me to make two images race at random across the screen to a finish line. I am required to make this happen using JavaScript. Unfortunately I have ran into some trouble here making this happen.
I have the script that allows a div container and an object "animate" (which is a small square) to move across the screen to the right as I am supposed to do. My question comes into play when trying to do this to two different images.
The goal is to have the animation I have created to apply to the images, I cannot figure out how to apply the functions to the images already placed on the page to make it seem as if they are racing on random intervals across the page to the finish line.
I understand the concept of the animation and the JavaScript behind it, I just dont understand how to make it apply to an image, and more than 1 image at that.
Please advise.
Here is my code that I am using: you can see that I left my demo animation on the page, and the two images I am looking to apply it to.
function myMove()
{
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame()
{
if (pos == 350)
{
clearInterval(id);
}
else
{
pos++;
elem.style.left = pos + 'px';
}
}
}
<div id="traffic-light">
<div id="stopLight" class="bulb"></div>
<div id="yeildLight" class="bulb"></div>
<div id="goLight" class="bulb"></div>
</div>
<style>
body {
overflow: hidden;
}
#bluefish {
position: absolute;
top: 31pc;
width: 17pc;
left: -.5pc;
}
#turtle {
position: absolute;
width: 15pc;
top: 20pc;
}
body {
background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
}
.finishline {
position: absolute;
right: -12pc;
top: 18pc;
}
#traffic-light {
height: 10pc;
width: 4pc;
background-color: #333;
border-radius: 20pc;
position: absolute;
}
.bulb {
height: 2pc;
width: 2pc;
background-color: #111;
border-radius: 50%;
margin: 15px auto;
transition: background 500ms;
}
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
</style>
<img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
</div>

Try this one:
function myMove()
{
var elemBluefish = document.getElementById("bluefish");
var elemBluefishWin = document.getElementById("bluefishwin");
var elemTurtle = document.getElementById("turtle");
var elemTurtleWin = document.getElementById("turtlewin");
var posBluefish = 0;
var posTurtle = 0;
var hasWinner = false;
elemBluefishWin.style.display = 'none';
elemTurtleWin.style.display = 'none';
var id = setInterval(frame, 5);
function frame()
{
if(posBluefish >= 350 && posTurtle >= 350)
{
clearInterval(id);
return;
}
if(posBluefish < 350)
{
posBluefish += Math.round(Math.random()*10);
if(posBluefish >= 350)
{
posBluefish = 350;
if(!hasWinner){
hasWinner = true;
elemBluefishWin.style.display = 'unset';
}
}
elemBluefish.style.left = posBluefish + 'px';
}
if(posTurtle < 350)
{
posTurtle += Math.round(Math.random()*10);
if(posTurtle >= 350)
{
posTurtle = 350;
if(!hasWinner){
hasWinner = true;
elemTurtleWin.style.display = 'unset';
}
}
elemTurtle.style.left = posTurtle + 'px';
}
}
}
<div id="traffic-light">
<div id="stopLight" class="bulb"></div>
<div id="yeildLight" class="bulb"></div>
<div id="goLight" class="bulb"></div>
</div>
<style>
body {
overflow: hidden;
}
#bluefish {
position: absolute;
top: 31pc;
width: 17pc;
left: -.5pc;
}
#turtle {
position: absolute;
width: 15pc;
top: 20pc;
}
#bluefishwin {
position: absolute;
right: 1pc;
top: 31pc;
display: none;
}
#turtlewin {
position: absolute;
right: 1pc;
top: 20pc;
display: none;
}
body {
background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
}
.finishline {
position: absolute;
right: -12pc;
top: 18pc;
}
#traffic-light {
height: 10pc;
width: 4pc;
background-color: #333;
border-radius: 20pc;
position: absolute;
}
.bulb {
height: 2pc;
width: 2pc;
background-color: #111;
border-radius: 50%;
margin: 15px auto;
transition: background 500ms;
}
/*#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}*/
</style>
<img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">
<img id="bluefishwin" src="http://a.dryicons.com/images/icon_sets/coquette_part_3_icons_set/png/128x128/prize_winner.png">
<img id="turtlewin" src="http://a.dryicons.com/images/icon_sets/coquette_part_3_icons_set/png/128x128/prize_winner.png">
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
</div>
It gets an element for each image and adds every 5ms a random amount of pixels (between 0 and 9) to each pos of image.
If both "racers" reached the target (350px) the interval is cleared and the race is over.
The winner gets an image displayed at the finish line.

an example:
function startRace() {
animateRacer("player1", true);
animateRacer("player2", true);
}
function animateRacer(playerId, reset) {
var elem = document.getElementById(playerId);
var pos = parseInt(elem.style.left, 10);
if (isNaN(pos) || reset) {
pos = 0;
}
//console.log(playerId + ': ' + pos);
if (pos < 450) {
pos += randStep(3);
elem.style.left = pos + 'px';
setTimeout('animateRacer("' + playerId + '")', randStep(5));
}
}
function randStep(max) {
var min = 1;
return Math.floor(Math.random() * (max - min)) + min;
}
body {
overflow: hidden;
}
#container {
width: 500px;
height: 160px;
position: relative;
background-color: yellow;
}
.player {
width: 50px;
height: 50px;
background-color: gray;
position: relative;
}
#player1 {
background-color: red;
top: 20px;
}
#player2 {
background-color: blue;
top: 40px;
}
<p>
<button onclick="startRace()">Start Race</button>
</p>
<div id="container">
<div id="player1" class="player"></div>
<div id="player2" class="player"></div>
</div>

function mover(obj) {
this.obj=obj;
this.pos = 0;
this.id = setInterval(this.frame, 5);
}
mover.prototype.frame=function() {
if (this.pos == 350) {
clearInterval(this.id);
} else {
this.pos++;
this.obj.style.left = this.pos + 'px';
}
}
}
Simply do:
img1=new mover(document.getElementById("pic1"));
You can repeat this with every image and you could store them into an array:
images=[];
function letsmove(){
images.push(new mover(someid));
...
}
And you can do this with all images on the site:
images=[];
function letsmove(){
domimages=document.getElementsByTagName("img");
domimages.forEach(function(img){
images.push(new mover(img));
});
}
}
See JS OOP and JS Prototyping for more explanation

Cant Move my image to the right using jquery(Image Slider)

Image Slider Problem
actually i am a beginner in jquery.My aim is to create a brilliant image slider.I already create image slider using jquery from lot of tutorials.
code part
slider.js
$(document).ready(function(){
$(".slider li:first-child").addClass("active");
setTimeout(autoAddClass, 5000);
$('.next').click(function() {
nextslide();
});
$('.previous').click(function() {
previousslide();
});
});
function nextslide()
{
$('.slider li:first-child').hide('slide', {direction: 'left'}, 1000);
//$('.slider li:first-child').fadeOut().next().fadeIn().end().appendTo('.slider');
}
function previousslide(){
$('.slider li:first-child').fadeOut();
$('.slider li:last-child').prependTo('.slider').fadeOut();
$('.slider li:first-child').fadeIn();
setTimeout(autoAddClass, 5000);
}
function autoAddClass(){
var next = $(".active").removeClass("active").next();
if(next.length)
$(next).addClass('active');
else
$('.slider li:first-child').addClass('active');
setTimeout(autoAddClass, 5000);
}
*{
margin: 0;
padding: 0;
}
.full_width{
/*display: inline-block;*/
display: block;
width: 100%;
}
.full_width.language_header{
height: 50px;
background-color:#000;
/*margin-bottom: -5px;*/
}
.full_width.slider_header{
height: 600px;
background-color:#fff;
/*margin-bottom: -5px;*/
overflow: hidden;
}
.main_content{
/*display: inline-block;*/
display: block;
width:100%;
float:left;
}
.wrapper{
margin: 0 auto;
max-width: 1125px;
width: 100%;
}
.main_slider{
width: 100%;
float: left;
}
.active{
display: block;
}
ul{
list-style: none;
}
li{
display: block;
display: none;
}
.previous{
color: #000;
}
.next{
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="full_width slider_header">
<div class="wrapper">
<div class="main_content">
<div class="main_slider">
Previous
Next
<ul class="slider">
<li><img height="100%" width="100%" alt="#Welcome" src="img/pic1.jpg"></li>
<li><img height="100%" width="100%" alt="#Welcome" src="img/pic3.jpg"></li>
<li><img height="100%" width="100%" alt="#Welcome" src="img/pic2.jpg"></li>
<li><img height="100%" width="100%" alt="#Welcome" src="img/pic4.jpg"></li>
<li><img height="100%" width="100%" alt="#Welcome" src="img/pic5.jpg"></li>
</ul>
</div>
The problem is when i click the next pervious button(from screen shot) the 1st image will move on to right and the second one is load. i the current it doesn't happen please help.

So here is an example of what you can do.
I simplified you html. You don't need that many classes for a Jquery slider.
Simply what i did is this:
This is where all the magic happens:
.slider img {
transition: left 1s;
}
This makes it flow from the left to the right.
Left can only be used with position and is also set.
.slider img {
position: absolute;
}
The animation happens when we set the css propert in Jquery:
$active.css('left', wid);
Dont get confused by the wid its just a measurement: var wid = $active.width();
Now with previous button!
last edit: Its now a slidable div with a heading you can edit the div hover you would like.
$(".slider .slide:first-child").addClass("active");
//setInterval(nextslide, 5000);
$('.next').click(function () {
nextslide();
});
$('.previous').click(function () {
previousslide();
});
function nextslide() {
var $active = $('.slider .active');
var wid = $active.width();
$active.css('left', wid);
var $next;
if ($active.next().length != 0)
$next = $active.next();
else
$next = $('.slider .slide').first()
$next.addClass("next")
setTimeout(function () {
$next.addClass('active');
$next.removeClass("next");
$active.removeClass('active');
$active.css('left', 0);
}, 1000);
}
function previousslide() {
var $active = $('.slider .active');
var $previous;
if ($active.prev().length != 0) {
$previous = $active.prev();
} else
$previous = $('.slider .slide').last();
var wid = $previous.width();
$previous.css('left', wid);
setTimeout(function () {
$active.removeClass("active");
$active.addClass("previous");
$previous.addClass('active');
$previous.css('left', 0);
}, 1000);
setTimeout(function () {
$active.removeClass("previous");
}, 2000);
}
* {
margin: 0;
padding: 0;
}
.slider .slide {
transition: left 1s;
position: absolute;
height: 100%;
width: 100%;
left: 0;
background-color: white;
}
.slide img {
max-width: 100%;
}
.slider .next {
z-index: 98;
}
.slider .previous {
z-index: 98;
}
.slider .active {
z-index: 99;
}
.slider {
position: relative;
height: 400px;
width: 400px;
overflow: hidden;
border: solid black 2px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<div class="btn-group">
<button class="previous">previus</button>
<button class="next">Next</button>
</div>
<div class="slider">
<div class="slide">
<h4>Now with text and kittens!</h4>
<img src="https://www.math.ku.edu/~wsanders/Kittens/new%20kittens/Cute-little-kittens-550x365.jpg" />
</div>
<div class="slide">
<h4>I hope this helps you out</h4>
<img src="http://maxcdn.thedesigninspiration.com/wp-content/uploads/2012/08/Cuddling-Kittens-002.jpg" />
</div>
<div class="slide">
<h4>Its not so hard to modify the code. You should really try it yourself.</h4>
<img src="https://tyrannyoftradition.files.wordpress.com/2012/05/cutest-kitten-hat-ever-13727-1238540322-17.jpg" />
</div>
</div>
</main>

Categories

Resources