Javascript 在滑块上居中显示主图片
我是新来的 我尝试使用javascript和css来显示一个有很多图片的滑块，它们彼此相邻可见 单击“下一步”或“上一步”按钮时，如何在滑块中居中显示主图像 不管我做了什么，它都不是我想要的方式 对不起，如果我的英语不好 js代码Javascript 在滑块上居中显示主图片,javascript,html,css,slider,Javascript,Html,Css,Slider,我是新来的 我尝试使用javascript和css来显示一个有很多图片的滑块，它们彼此相邻可见 单击“下一步”或“上一步”按钮时，如何在滑块中居中显示主图像 不管我做了什么，它都不是我想要的方式 对不起，如果我的英语不好 js代码 const urls = ['../portfolio/img/perenoel.png', '../portfolio/img/monavenir.png', '../portfolio/img/kitsitter.png', '../portfolio/img
const urls = ['../portfolio/img/perenoel.png', '../portfolio/img/monavenir.png', '../portfolio/img/kitsitter.png',
'../portfolio/img/kitsitter.png', '../portfolio/img/kitsitter.png', '../portfolio/img/kitsitter.png','../portfolio/img/kitsitter.png','../portfolio/img/kitsitter.png','../portfolio/img/perenoel.png', '../portfolio/img/perenoel.png',
];
const carrousel = document.getElementById('slider');
const figure = document.createElement('figure');
const div2 = document.createElement('div');
const figureid = "figureid" ;
figure.id = figureid;
const btn_previous = document.createElement('button');
const btn_next = document.createElement('button');
btn_next.classList.add("next");
btn_previous.classList.add("previous");
figure.classList.add("figure");
carrousel.appendChild(figure);
figure.appendChild(div2);
for (a = 0; a< urls.length; a++){
const img = document.createElement('img');
img.src = urls[a];
const num = a+1;
div2.appendChild(img);
img.classList.add('imgcarousel');
carrousel.appendChild(btn_previous);
carrousel.appendChild(btn_next);
let current_image = 2;
const imgcarousel = document.getElementsByClassName('imgcarousel')[a];
const div = document.getElementsByClassName('description')[a];
img.classList.add(num);
div.classList.add(num);
const classnum = num;
const figure_width = figure.getBoundingClientRect().width;
const img_width = imgcarousel.getBoundingClientRect().height;
// div2.style.marginLeft="-5%";
function rotation (){
if(classnum == current_image){
imgcarousel.classList.toggle('actif');
imgcarousel.style.height="80%";
// imgcarousel.style.zIndex="10";
imgcarousel.style.boxShadow="1px 1px 12px #555";
div.style.display="block";
// imgcarousel.style.marginLeft="0%";
}
else {
imgcarousel.style.height="50%";
imgcarousel.style.boxShadow="0 0 0";
div.style.display="none";
// imgcarousel.style.zIndex="7";
}
}
function nextshift(){
if(classnum == current_image - 1){;
div2.appendChild(div2.firstChild);
}
}
function previousshift(){
if(classnum == current_image){
div2.insertBefore(div2.lastChild, div2.firstChild);
}
}
rotation();
btn_next.addEventListener('click', function () {
++current_image;
rotation();
nextshift();
if (current_image > urls.length) {
current_image = 0;
}
// div2.style.marginLeft= +"5%";
});
btn_previous.addEventListener('click', function () {
--current_image;
rotation();
previousshift();
if (current_image < 1) {
current_image = urls.length+1;
}
});
}
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link href="./css/main.css" rel="stylesheet">
<link href="./css/realisation.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/e087129262.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<i class="fas fa-bars" aria-hidden="true"></i>
<li><a href="index.php"><i class="fas fa-home"></i><p>Accueil</p></a></li>
<li><a href="realisation.php"><i class="far fa-images"></i> <p>Réalisation</p></a></li>
<li><a href="experience.php" > <i class="fas fa-certificate"></i> <p>Experience</p></a></li>
<li><a href="formation.php"><i class="fas fa-graduation-cap"></i><p>Formation</p></a></li>
</nav>
<main>
<article class="projet">
<h1>Mes réalisations</h1>
<section id="slider">
</section>
<div class="papanoel description">
<section>
<h2>Monpapanoel.com</h2>
<p>C'est un site pour faire patienter les enfants jusqu'à noël, ils peuvent jouer à un jeux,
lire une histoire ou appeler le père noël et télécharger la conversation.
Conception, Réalisation de la charte graphique (le logo existait déjà), Intégration sur wordpress.
</p>
<span>HTML/CSS/JS/PHP/MYSQL/WORDPRESS/ELEMENTOR/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="monpapanoel.com"><div>voir le site</div></a>
</section>
</div>
<div class="monavenir description">
<section>
<h2>Monavenir.com</h2>
<p>Le site permet de prendre contact avec des voyants pour leur poser des questions sur leur avenir. On
peut y acheter des crédits. Conception, Réalisation de la charte graphique (le logo existait déjà), Intégration sur wordpress.
</p>
<span>HTML/CSS/JS/WORDPRESS/ELEMENTOR/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="monavenir.com"><div>voir le site</div></a>
</section>
</div>
<div class="kitsiter description">
<section>
<h2>Kitsiter</h2>
<p>Création de la charte graphique, logo, interface et intégration sur angular sur le thème des petsitters.
</p>
<span>HTML/CSS/ANGULAR/JS/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="mettreliengitversleprojet"><div>voir le projet</div></a>
</section>
</div>
<div class="kitsiter description">
<section>
<h2>Kitsiter</h2>
<p>Création de la charte graphique, logo, interface et intégration sur angular sur le thème des petsitters.
</p>
<span>HTML/CSS/ANGULAR/JS/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="mettreliengitversleprojet"><div>voir le projet</div></a>
</section>
</div>
<div class="kitsiter description">
<section>
<h2>Kitsiter</h2>
<p>Création de la charte graphique, logo, interface et intégration sur angular sur le thème des petsitters.
</p>
<span>HTML/CSS/ANGULAR/JS/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="mettreliengitversleprojet"><div>voir le projet</div></a>
</section>
</div>
<div class="kitsiter description">
<section>
<h2>Kitsiter</h2>
<p>Création de la charte graphique, logo, interface et intégration sur angular sur le thème des petsitters.
</p>
<span>HTML/CSS/ANGULAR/JS/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="mettreliengitversleprojet"><div>voir le projet</div></a>
</section>
</div>
<div class="kitsiter description">
<section>
<h2>Kitsiter</h2>
<p>Création de la charte graphique, logo, interface et intégration sur angular sur le thème des petsitters.
</p>
<span>HTML/CSS/ANGULAR/JS/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="mettreliengitversleprojet"><div>voir le projet</div></a>
</section>
</div> <div class="kitsiter description">
<section>
<h2>Kitsiter</h2>
<p>Création de la charte graphique, logo, interface et intégration sur angular sur le thème des petsitters.
</p>
<span>HTML/CSS/ANGULAR/JS/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="mettreliengitversleprojet"><div>voir le projet</div></a>
</section>
</div>
<div class="kitsiter description">
<section>
<h2>Kitsiter</h2>
<p>Création de la charte graphique, logo, interface et intégration sur angular sur le thème des petsitters.
</p>
<span>HTML/CSS/ANGULAR/JS/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="mettreliengitversleprojet"><div>voir le projet</div></a>
</section>
</div>
<div class="kitsiter description">
<section>
<h2>Kitsiter</h2>
<p>Création de la charte graphique, logo, interface et intégration sur angular sur le thème des petsitters.
</p>
<span>HTML/CSS/ANGULAR/JS/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="mettreliengitversleprojet"><div>voir le projet</div></a>
</section>
</div>
</article>
<article class="print">
<div><img src="../portfolio/img/ecurie.jpg"></div>
<div><img src="../portfolio/img/pinit.jpg"></div>
<div><img src="../portfolio/img/potager.jpg"></div>
<div><img src="../portfolio/img/gouter.jpg"></div>
<div><img src="../portfolio/img/artsacrer.jpg"></div>
<div><img src="../portfolio/img/osteo.jpg"></div>
<div><img src="../portfolio/img/mystere.jpg"></div>
<div><img src="../portfolio/img/arbre.jpg"></div>
</article>
</main>
<footer>copyright 2020 julie henriet</footer>
<script type="text/javascript" src="./js/carrousel.js"></script></footer>
</body>
</html>
家
Monavenir.com
请联系阿韦纳河畔的居民。在…上
佩特·艾切特·德斯雷迪茨（peut y acheter des crédits）。概念，图形图表的重新设计（商标存在），文字出版社的整合。
HTML/CSS/JS/WORDPRESS/ELEMENTOR/adobexd/PHOSOTSHOP/ILLUSTRATOR
基斯特
图表、标志、界面和装饰的装饰，以及宠物的角度。
HTML/CSS/ANGULAR/JS/adobexd/PHOSOTSHOP/ILLUSTRATOR
基斯特
图表、标志、界面和装饰的装饰，以及宠物的角度。
HTML/CSS/ANGULAR/JS/adobexd/PHOSOTSHOP/ILLUSTRATOR
基斯特
图表、标志、界面和装饰的装饰，以及宠物的角度。
HTML/CSS/ANGULAR/JS/adobexd/PHOSOTSHOP/ILLUSTRATOR
基斯特
图表、标志、界面和装饰的装饰，以及宠物的角度。
HTML/CSS/ANGULAR/JS/adobexd/PHOSOTSHOP/ILLUSTRATOR
基斯特
图表、标志、界面和装饰的装饰，以及宠物的角度。
HTML/CSS/ANGULAR/JS/adobexd/PHOSOTSHOP/ILLUSTRATOR
基斯特
图表、标志、界面和装饰的装饰，以及宠物的角度。
HTML/CSS/ANGULAR/JS/adobexd/PHOSOTSHOP/ILLUSTRATOR
基斯特
图表、标志、界面和装饰的装饰，以及宠物的角度。
HTML/CSS/ANGULAR/JS/adobexd/PHOSOTSHOP/ILLUSTRATOR
基斯特
图表、标志、界面和装饰的装饰，以及宠物的角度。
HTML/CSS/ANGULAR/JS/adobexd/PHOSOTSHOP/ILLUSTRATOR
版权所有2020 julie henriet
非常感谢请添加最小的CSS和HTML进行复制。这是为css和htmlapparently而做的，我忘记了css中只有一个justify content center:）
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link href="./css/main.css" rel="stylesheet">
<link href="./css/realisation.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/e087129262.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<i class="fas fa-bars" aria-hidden="true"></i>
<li><a href="index.php"><i class="fas fa-home"></i><p>Accueil</p></a></li>
<li><a href="realisation.php"><i class="far fa-images"></i> <p>Réalisation</p></a></li>
<li><a href="experience.php" > <i class="fas fa-certificate"></i> <p>Experience</p></a></li>
<li><a href="formation.php"><i class="fas fa-graduation-cap"></i><p>Formation</p></a></li>
</nav>
<main>
<article class="projet">
<h1>Mes réalisations</h1>
<section id="slider">
</section>
<div class="papanoel description">
<section>
<h2>Monpapanoel.com</h2>
<p>C'est un site pour faire patienter les enfants jusqu'à noël, ils peuvent jouer à un jeux,
lire une histoire ou appeler le père noël et télécharger la conversation.
Conception, Réalisation de la charte graphique (le logo existait déjà), Intégration sur wordpress.
</p>
<span>HTML/CSS/JS/PHP/MYSQL/WORDPRESS/ELEMENTOR/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="monpapanoel.com"><div>voir le site</div></a>
</section>
</div>
<div class="monavenir description">
<section>
<h2>Monavenir.com</h2>
<p>Le site permet de prendre contact avec des voyants pour leur poser des questions sur leur avenir. On
peut y acheter des crédits. Conception, Réalisation de la charte graphique (le logo existait déjà), Intégration sur wordpress.
</p>
<span>HTML/CSS/JS/WORDPRESS/ELEMENTOR/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="monavenir.com"><div>voir le site</div></a>
</section>
</div>
<div class="kitsiter description">
<section>
<h2>Kitsiter</h2>
<p>Création de la charte graphique, logo, interface et intégration sur angular sur le thème des petsitters.
</p>
<span>HTML/CSS/ANGULAR/JS/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="mettreliengitversleprojet"><div>voir le projet</div></a>
</section>
</div>
<div class="kitsiter description">
<section>
<h2>Kitsiter</h2>
<p>Création de la charte graphique, logo, interface et intégration sur angular sur le thème des petsitters.
</p>
<span>HTML/CSS/ANGULAR/JS/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="mettreliengitversleprojet"><div>voir le projet</div></a>
</section>
</div>
<div class="kitsiter description">
<section>
<h2>Kitsiter</h2>
<p>Création de la charte graphique, logo, interface et intégration sur angular sur le thème des petsitters.
</p>
<span>HTML/CSS/ANGULAR/JS/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="mettreliengitversleprojet"><div>voir le projet</div></a>
</section>
</div>
<div class="kitsiter description">
<section>
<h2>Kitsiter</h2>
<p>Création de la charte graphique, logo, interface et intégration sur angular sur le thème des petsitters.
</p>
<span>HTML/CSS/ANGULAR/JS/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="mettreliengitversleprojet"><div>voir le projet</div></a>
</section>
</div>
<div class="kitsiter description">
<section>
<h2>Kitsiter</h2>
<p>Création de la charte graphique, logo, interface et intégration sur angular sur le thème des petsitters.
</p>
<span>HTML/CSS/ANGULAR/JS/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="mettreliengitversleprojet"><div>voir le projet</div></a>
</section>
</div> <div class="kitsiter description">
<section>
<h2>Kitsiter</h2>
<p>Création de la charte graphique, logo, interface et intégration sur angular sur le thème des petsitters.
</p>
<span>HTML/CSS/ANGULAR/JS/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="mettreliengitversleprojet"><div>voir le projet</div></a>
</section>
</div>
<div class="kitsiter description">
<section>
<h2>Kitsiter</h2>
<p>Création de la charte graphique, logo, interface et intégration sur angular sur le thème des petsitters.
</p>
<span>HTML/CSS/ANGULAR/JS/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="mettreliengitversleprojet"><div>voir le projet</div></a>
</section>
</div>
<div class="kitsiter description">
<section>
<h2>Kitsiter</h2>
<p>Création de la charte graphique, logo, interface et intégration sur angular sur le thème des petsitters.
</p>
<span>HTML/CSS/ANGULAR/JS/ADOBE XD/PHOSOTSHOP/ILLUSTRATOR</span>
<a class="link" href="mettreliengitversleprojet"><div>voir le projet</div></a>
</section>
</div>
</article>
<article class="print">
<div><img src="../portfolio/img/ecurie.jpg"></div>
<div><img src="../portfolio/img/pinit.jpg"></div>
<div><img src="../portfolio/img/potager.jpg"></div>
<div><img src="../portfolio/img/gouter.jpg"></div>
<div><img src="../portfolio/img/artsacrer.jpg"></div>
<div><img src="../portfolio/img/osteo.jpg"></div>
<div><img src="../portfolio/img/mystere.jpg"></div>
<div><img src="../portfolio/img/arbre.jpg"></div>
</article>
</main>
<footer>copyright 2020 julie henriet</footer>
<script type="text/javascript" src="./js/carrousel.js"></script></footer>
</body>
</html>