I want to use jQuery so that the image changes as it fades.
Error messageThe image does not change.
Code
Code
.main {
height: 1000px;
}
.image-crossfader {
overflow: hidden;
position: relative;
height: 100%;
}
.image-crossfader-inner {
background-size: cover;
background-position: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.image-crossfader-inner: nth-child (1) {
background-image: url ('https://bit.ly/2lO4USI');
}
.image-crossfader-inner: nth-child (2) {
background-image: url ('https://bit.ly/2lO9PDg');
}
.image-crossfader-inner: nth-child (3) {
background-image: url ('https://bit.ly/2mEDLzs');
}
.image-crossfader-inner: nth-child (4) {
background-image: url ('https://bit.ly/2mo9SaH');
}
Code
var $inner, duration, defaultIndex, switchImage;
$inner = $(". image-crossfader-inner");
interval = 3500;
duration = 5000;
defaultIndex = 0;
switchImage = function (next) {
var current, $current, $next;
current = next? next-1: $inner.length-1;
$current = $inner.eq (current);
$current.css ({"z-index": 0}). fadeOut (interval, "easeInOutQuad");
$({scale: 1.06}). animate (
{scale: 1},
{
duration: interval,
easing: "easeInOutQuad",
progress: function () {
$current.css ("transform", "scale (" + this.scale + ")");
}
}
);
$next = $inner.eq (next);
$next.css ({"z-index": 1}). fadeIn (interval, "easeInOutQuad");
$({scale: 1}). animate (
{scale: 1.06},
{
duration: interval,
easing: "easeInOutQuad",
progress: function () {
$next.css ("transform", "scale (" + this.scale + ")");
}
}
);
next = ++ next<$inner.length? next: 0;
setTimeout (switchImage.bind (this, next), duration);
};
$.easing.easeInOutQuad = function (x, t, b, c, d) {
if ((t/= d/2)<1) return (c/2) * t * t + b;
return (-c/2) * (--t * (t-2)-1) + b;
};
window.onload = function () {
$inner.fadeOut (0);
switchImage.bind (this, defaultIndex) ();
};
Please provide more detailed information here.
-
Answer # 1
Related articles
- html - i want to switch images using jquery
- python - i want to switch images using itemconfig in the gui, but it doesn't work
- css - [jquery] how to switch hiding with the select box
- human detection from images using python and opencv
- i want to shorten the description written with jquery using an if statement
- xcode - i want to display images using firebase storage with swift
- jquery - link preview using jqeury package in rails 6
- javascript - i want to switch images at regular intervals
- i want to display text dynamically using jquery
- i get an error when using jquery in javascript
- html - accordion using jquery, want to change the parent element of the pressed button
- when switching images with jquery thumbnail click, class does not come off after the third click
- unnecessary things do not disappear by using jquery plugin
- cannot send data to php file by ajax communication using jquery in javascript
- i want to display images on the web side using sdk with cakephp3
- javascript - manual input using jquery timepicker
- html - creating a tab page using jquery
- jquery ui - i don't know how to save when moving data between data lists using sortable
- javascript - i want to get all the values in the html data list using jquery
- add to specific tag using jquery replace
Easy to write.
Sample