English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Questo è un carosello che ho creato personalmente, potete dare un'occhiata, non ho ancora ottimizzato. Se avete suggerimenti, potete scrivermi in privato.
Lasciate che voi gestiate il layout.
<div class="slider" id="circle">
<a href=""><img src="img/6p.jpg" alt="" /></a>
`
<ul class="circle">
<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="current" onclick="lun(6)" id="ico6">6</li>
</ul>
<div class="arrow">
<a href="javaScript:;" class="arrow-l" onclick="bo2()" id="bo1"><</a>
<a href="javaScript:;" class="arrow-r" onclick="bo1()" id="bo2">></a>
</div>
</div>
<script>
var c = 0;
var t;
window.onload = function () {
t = setInterval("bo1()",5000);
}
funzione lun(num){
c = num;
var ptn = document.getElementById("circle").getElementsByTagName("img")[0];
per (var i = 1; i < 7; i++) {
var li = document.getElementById("circle").getElementsByTagName("li")[i-1];
li.style.backgroundColor = "#3E3E3E";
se (num == i) {
ptn.src = "img/" + i + "p.jpg";
li.style.backgroundColor = "#B61B1F";
}
}
}
funzione bo1() {
se (c >= 6) {
c = 0;
}
c++;
lun(c);
}
funzione bo2() {
se (c <= 1) {
c = 7 ;
}
c--;
lun(c);
}
</script>
Ecco un DEMO di scorrimento personalizzato con la rotella del mouse:
Ecco il codice specifico:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<style type="text/css">
body
{
font-size: 14px;
font-family: Microsoft YaHei, Tahoma, Geneva, sans-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%;
/*Perspettiva per contenitore animazione*/
-webkit-perspective: 800px;
-moz-perspective: 800px;
}
#content ul li a > div
{
position: absolute;
left: 0;
height: 0;
width: 100%;
height: 100%;
color: #fff;
/*Stile transform per elemento animato*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transition: .8s ease-in-out ;
-moz-transition: .8s ease-in-out ;
/*Elemento animato dietro nascosto*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
#content ul li a div:first-child
{
/*
Ruotare attorno all'asse 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>
<body>
<div id="content">
<ul>
<li>
<a href="#" target="_blank">
<div><img alt="" src="images/1.jpg"/></div>
<div>
<h3>Naruto Uzumaki</h3>
<p>Il protagonista del manga di Hayashi Kishiro "Naruto" del Giappone. Poiché il suo corpo è incinto dal serpente a nove code malvagio, cresciuto senza padre né madre, è stato trattato con indifferenza e discriminazione dai villaggi, deciso a diventare il sesto Hokage, facendo sì che tutti riconoscano la sua esistenza.</p>
</div>
</a>
</li>
<li>
<a href="#" target="_blank">
<div>
<img alt="" src="images/2.jpg"/>
</div>
<div>
<h3>Uzumaki Hinata</h3>
<p>
La terza protagonista femminile dell'opera del mangaka giapponese Kishimoto Masashi, "Naruto". È una ninja del villaggio di Konoha, la figlia maggiore del capo della famiglia Nishikado, una delle famiglie più antiche del villaggio. Adora Naruto, era una ragazza debole di carattere, ma sotto l'influenza di Naruto è diventata sempre più forte e è cresciuta fino a diventare una ninja eccezionale.</p>
</div>
</a>
</li>
<li>
<a href="#" target="_blank">
<div><img alt="" src="images/3.jpg"/></div>
<div>
<h3>Monkey D. Luffy</h3>
<p>Monkey D. Luffy è il protagonista dell'anime giapponese popolare "One Piece" e il capitano della ciurma dei Pirati dei Cappelli di Paglia. Il suo sogno è trovare il tesoro mitico ONE PIECE e diventare il re dei pirati.</p>
</div>
</a>
</li>
<li>
<a href="#" target="_blank">
<div>
<img alt="" src="images/4.jpg"/>
</div>
<div>
<h3>Signor Scatola</h3>
<p>
Danbo è un dolce giocattolo fatto di scarti di cartone, con occhi rotondi e una bocca triangolare, che mostra sempre un'espressione innocente, che rende tutti teneri quando lo vedono. Danbo è un piccolo creatore onesto e gentile, nel suo mondo di fantasia puro, trasmette sempre un'atmosfera di dolcezza e affetto.</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
Ciò che è stato menzionato sopra è la guida di presentazione dell'autore sui caroselli JavaScript e le barre di scorrimento personalizzate che si combinano con la rotella del mouse per condividere il codice, spero che sia utile a tutti. Se avete qualsiasi domanda, lasciate un commento e l'autore risponderà prontamente. In questo senso, l'autore desidera anche ringraziare tutti i sostenitori del sito web Yellowscream per il loro supporto!