English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
C'est un carrousel que j'ai fait moi-même, vous pouvez le voir, je n'ai pas encore optimisé. Si vous avez des suggestions d'amélioration, vous pouvez me contacter en privé
La mise en page est laissée à votre discrétion
<div class="slider" id="circle">
<a href=""><img src="img"}/6p.jpg" alt="" /></a>
`
<ul class="cercle" >
<li onclick="lun(1)" id="ico1">1</li>
<li onclick="lun(2)" id="ico2">2</li>
<li onclick="lun(3)" id="ico3">3</li>
<li onclick="lun(4)" id="ico4">4</li>
<li onclick="lun(5)" id="ico5">5</li>
<li class="courant" onclick="lun(6)" id="ico6">6</li>
</ul>
<div class="flèche">
<a href="javaScript:;" class="flèche-l"onclick="bo2()" id="bo1"><</a>
<a href="javaScript:;" class="flèche-r"onclick="bo1()" id="bo2">></a>
</div>
</div>
<script>
var c = 0 ;
var t ;
window.onload = function () {
t = setInterval("bo1()",5000);
}
function lun(num){
c = num ;
var ptn = document.getElementById("circle").getElementsByTagName("img")[0];
for (var i = 1 ; i < 7;++ ) {
var li = document.getElementById("circle").getElementsByTagName("li")[i-1];
li.style.backgroundColor = "#3E3E3E";
if (num == i) {
ptn.src = "img/"+ i + "p.jpg";
li.style.backgroundColor = "#B61B1F";
}
}
}
function bo1() {
if(c>=6{
c = 0 ;
}
c++;
lun(c);
}
function bo2() {
if(c<=1{
c = 7 ;
}
c--;
lun(c);
}
</script>
Voyons maintenant le DEMO de la barre de défilement personnalisée avec la molette de la souris
Voici le code spécifique ci-dessous :
<!DOCTYPE html>
<html>
<head>
<title></titre>
<meta charset="utf-8-8"/>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<style type="text/css">
corps
{
font-size: 14px;
font-police: Microsoft YaHei, Tahoma, Geneva, sans-serif-serif;
background: #111;
}
#content ul
{
width: 960px;
margin: 150px auto;
padding: 60px 0;
}
#content ul li
{
margin-right: 20px;
width: 225px;
height: 180px;
float: left;
}
#content ul li:last-child
{
margin-right: 0;
}
#content ul li a
{
position: relative;
display: block;
width: 100%;
height: 100%;
/*舞台（动画元素的父容器）perspective*/
-webkit-perspective: 800px;
-moz-perspective: 800px;
}
#content ul li a > div
{
position: absolute;
left: 0;
height: 0;
width: 100%;
height: 100%;
color: #fff;
/*动画元素transform-style*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transition: .8s ease-in-out ;
-moz-transition: .8s ease-in-out ;
/*动画元素背后设置为hidden*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
#content ul li a div:first-child
{
/*
围绕y轴旋转
*/
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
z-index: 2;
}
#content ul li a div:last-child
{
background: url("images/bg.jpg") no-repeat 0 0;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
z-index: 1;
}
#content ul li a:hover div:first-child
{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
}
#content ul li a:hover div:last-child
{
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
}
#content ul li a div h3
{
margin: 0 auto 15px;
padding: 15px 0;
width: 200px;
height: 16px;
line-height: 16px;
font-size: 14px;
text-align: center;
border-bottom: 1px #fff dashed;
}
#content ul li a div p
{
padding: 0 10px;
font-size: 12px;
text-indent: 2em;
line-height: 18px;
}
</style>
</head>
head>
<body>
<li>
<a href="#" target="_blank">
<div><img alt="" src="images/1.jpg"/></div>
<div>
<h3<div id="content">/h3>
<ul>/p>
</div>
</a>
</li>
<li>
<a href="#" target="_blank">
<div>
<img alt="" src="images/2.jpg"/>
</div>
<div>
<h3>Naruto Uzumaki</h3>
<p>
l'œuvre du mangaka Kishimoto Masashi, 'Naruto'. Parce qu'il porte le sceau du renard démonique maléfique, sans père ni mère, il a subi le mépris et la discrimination des villageois. Il a décidé de devenir le sixième Hokage pour que tout le monde reconnaisse son existence.<3la principale héroïne. Une ninja de la village des ninjas de Konoha, la fille aînée du chef de la famille noble Hyuga. Elle aime Naruto Uzumaki, une fille de caractère faible au début, mais elle s'est graduellement rendue plus forte sous l'influence de Naruto et est devenue une ninja exceptionnelle.</p>
</div>
</a>
</li>
<li>
<a href="#" target="_blank">
<div><img alt="" src="images/3.jpg"/></div>
<div>
<h3>Monsieur Monkey D. Luffy</h3>
<p>Monsieur Monkey D. Luffy est le personnage principal de l'anime populaire japonais 'One Piece'. C'est le capitaine du pirate de la Capeau de Paille, son rêve est de trouver le trésor légendaire - ONE PIECE, et de devenir le roi des pirates.</p>
</div>
</a>
</li>
<li>
<a href="#" target="_blank">
<div>
<img alt="" src="images/4.jpg"/>
</div>
<div>
<h3>Monsieur la boîte</h3>
<p>
Danbo est une adorable poupée faite de boîtes en carton, avec des yeux ronds et une bouche triangulaire, toujours avec une expression innocente, qui rend les gens tendres dès qu'ils la voient. Danbo est un petit être innocent et gentil, dans son monde de fantaisie simple, il exhale toujours une atmosphère touchante et adorable.</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
Ce que j'ai présenté ici sont les codes de partage pour les diaporamas JavaScript personnalisés et les barres de défilement personnalisées avec la molette de la souris, j'espère que cela vous sera utile. Si vous avez des questions, n'hésitez pas à laisser un message, je répondrai à temps. Je remercie également vivement tous ceux qui soutiennent le site de tutoriels à cris !