Skip to content

Instantly share code, notes, and snippets.

@Musinux
Created December 28, 2018 01:35
Show Gist options
  • Save Musinux/9b559e5802f3d2592be0614d06d7e62c to your computer and use it in GitHub Desktop.
Save Musinux/9b559e5802f3d2592be0614d06d7e62c to your computer and use it in GitHub Desktop.
<html>
<head>
<meta charset="utf-8">
<style>
header {
display: flex;
width: 1000px;
height: 200px;
border: 1px solid red;
}
.logo {
height: 190px;
width: 190px;
margin: 1em;
background-color: green;
}
.caroussel {
width: 400px;
flex-wrap: nowrap;
border: 14px solid black;
overflow-x: hidden;
}
.caroussel-inner {
width: 2000px;
}
.image {
display: inline-block;
position: relative;
border: 1px solid red;
left: 0px;
height: 150px;
width: 150px;
margin: 2px;
margin-left: 15px;
margin-right: 15px;
background-color: blue;
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<header>
<div class="logo">
</div>
<div class="caroussel">
<div class="caroussel-inner">
</div>
</div>
</header>
<script>
const SENS = -2
const INTERVAL = 25
const RECTANGLE_NUMBER = 6
const images=['a.png', 'b.png', 'c.png', 'd.png', 'e.png', 'a.png', 'b.png']
function genRectangles (number) {
const caroussel = document.querySelector(".caroussel-inner")
const images = []
for (let i = 0; i < number; i++) {
caroussel.innerHTML += "<div class='image'></div>"
}
return caroussel.querySelectorAll('.image')
}
function resetRectangles (rectangles) {
for (let i = 0; i < rectangles.length; i++) {
rectangles[i].style.left = '0px'
}
}
function moveImages (rectangles) {
console.log('move')
const carousselFrame = document.querySelector(".caroussel").getBoundingClientRect()
let reset = false
for (let i = 0; i < rectangles.length; i++) {
if (!rectangles[i].style.left) {
rectangles[i].style.left = '0px'
}
if (SENS > 1) {
const left = rectangles[i].getBoundingClientRect().left
if (i < rectangles.length - 1 && left > carousselFrame.right) {
reset = true
break
}
} else {
const right = rectangles[i].getBoundingClientRect().right
if (right < carousselFrame.left) {
reset = true
break
}
}
rectangles[i].style.left = (parseInt(rectangles[i].style.left) + SENS) + 'px'
}
return reset
}
function switchImages (images, rectangles) {
console.log(images)
if (SENS > 0) {
images.unshift(images.pop())
} else {
images.push(images.shift())
}
console.log(images)
for (let i = 0; i < rectangles.length; i++) {
rectangles[i].style['background-image'] = `url(${images[i % images.length]})`
}
}
const rectangles = genRectangles(RECTANGLE_NUMBER)
switchImages(images, rectangles)
setInterval(() => {
if (moveImages(rectangles)) {
switchImages(images, rectangles)
resetRectangles(rectangles)
}
}, INTERVAL)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment