I have an HTML webpage with the background shuffling through the images using javascript that are listed within an array. I was wondering if it would be possible to shuffle between these images in a random order every time the webpage is loaded. There are currently about 61 images that are within the array all named "1.jpg, 2.jpg, 3.jpg" within the "pics" folder. I would really like this to be updateable if we add/remove images in the future
For example, one time it will be 3,2,1,5,3 the next it will 1,3,2,5,4 next 5,1,4,2,3 and so on. Complete randomness.
Here is my HTML and Javascript
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<script src="jquery.js"></script>
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body>
</div>
<div id="carbon-block"></div>
</div>
</div>
<script src="jquery-background-slideshow.js"></script>
<script>
$(document).ready(function() {
/*
$(".layer").backgroundSlideshow({
delay: 3000,
transitionDuration: 3000,
images: [
"assets/images/image3.jpeg",
"assets/images/image4.jpeg"
]
})
*/
$("body").backgroundSlideshow({
onBeforeTransition: function(index) {
console.log("before transition", index)
},
onAfterTransition: function(index) {
console.log("after transition", index)
},
transitionDuration: 3000,
fixed: true,
images: ["pics/1.jpg", "pics/2.jpg", "pics/3.jpg", "pics/4.jpg"]
})
})
</script>
</body>
</html>
And here is there "jquery-background-slideshow.js"
* Author and copyright: Stefan Haack (https://shaack.com)
* Repository: https://github.com/shaack/jquery-background-slideshow/
* License: MIT, see file 'LICENSE'
*/
;(function ($) {
"use strict"
$.fn.backgroundSlideshow = function (options) {
this.each(function () {
var $container = $(this)
var $currentLayer = null
var $nextLayer = null
var currentImageIndex = 0
var nextImageIndex = 0
var preloadedImages = []
var config = {
delay: 5000,
transitionDuration: 3000,
onBeforeTransition: null,
onAfterTransition: null,
fixed: false,
images: []
}
for (var option in options) {
config[option] = options[option]
}
var transition = "opacity " + config.transitionDuration + "ms ease-in-out"
var layerStyles = {
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
position: config.fixed ? "fixed" : "absolute",
left: 0,
right: 0,
bottom: 0,
top: 0,
zIndex: -1
}
var layerStylesTransition = {
transition: transition,
"-webkit-transition": transition,
"-moz-transition": transition,
"-o-transition": transition
}
function preLoadImage(index) {
if (!preloadedImages[index]) {
preloadedImages[index] = new Image()
preloadedImages[index].src = config.images[index]
}
}
function addLayer(imageSrc, withTransition) {
var $newLayer = $("<div class='backgroundSlideshowLayer'/>")
var thisLayerStyles = layerStyles
thisLayerStyles.backgroundImage = "url(" + imageSrc + ")"
$newLayer.css("opacity", "0")
$newLayer.css(thisLayerStyles)
if(withTransition) {
$newLayer.css(layerStylesTransition)
}
var $lastLayer = $container.find("> .backgroundSlideshowLayer").last()
if ($lastLayer[0]) {
$lastLayer.after($newLayer)
} else {
$container.prepend($newLayer)
}
return $newLayer
}
function nextImage(withTransition) {
currentImageIndex = nextImageIndex
nextImageIndex++
if (nextImageIndex >= config.images.length) {
nextImageIndex = 0
}
if ($nextLayer) {
$currentLayer = $nextLayer
} else {
$currentLayer = addLayer(config.images[currentImageIndex], withTransition)
}
if (config.onBeforeTransition) {
config.onBeforeTransition(currentImageIndex)
}
$currentLayer.css("opacity", "1")
setTimeout(function() {
if (config.onAfterTransition) {
config.onAfterTransition(currentImageIndex)
}
preLoadImage(nextImageIndex)
}, withTransition ? config.transitionDuration : 0)
setTimeout(function() {
$nextLayer = addLayer(config.images[nextImageIndex], true)
cleanUp()
}, config.transitionDuration)
}
function cleanUp() {
var $layers = $container.find("> .backgroundSlideshowLayer")
if ($layers.length > 2) {
$layers.first().remove()
}
}
$container.css("position", "relative")
nextImage(false)
setTimeout(function () {
nextImage(true)
setInterval(function () {
nextImage(true)
}, config.delay + config.transitionDuration)
}, config.delay)
})
}
}(jQuery)) ```
Aucun commentaire:
Enregistrer un commentaire