English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Este es un carrusel que hice yo mismo, pueden echarle un vistazo, aún no lo he optimizado. Si tienen sugerencias, pueden hablar conmigo en privado
Ustedes pueden arreglar el diseño por su cuenta
<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);
}
function lun(num){
c = num ;
var ptn = document.getElementById("circle").getElementsByTagName("img")[0];
for (var i = 1 ; i < 7;i++ ) {
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>
Let's see the custom scrollbar with mouse wheel DEMO below
The specific code is shown as follows:
!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%;
/*舞台（动画元素的父容器）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>
el mangaka japonés Kishimoto Masashi en su obra 'Naruto'. Debe su nombre a la serpiente de nueve colas que lo posee, sin padres ni madre, ha soportado la mirada de desprecio y el desprecio de los aldeanos, y ha decidido convertirse en el sexto Hokage para que todos reconozcan su existencia.<3la protagonista número uno. Ninja femenina de la aldea de ninja Kiri, la hija mayor del líder del linaje de la familia Nakamura. Le gusta Naruto Uzumaki, originalmente una chica de personalidad débil, pero bajo el influjo de Naruto se ha vuelto cada vez más fuerte y ha crecido en una ninja excelente.</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 es el protagonista del anime japonés popular 'One Piece'. Es el capitán del grupo de piratas 'Sombrero de Paja', sueña con encontrar el tesoro legendario - ONE PIECE y convertirse en el Rey de los Piratas.</p>
</div>
</a>
</li>
<li>
<a href="#" target="_blank">
<div>
<img alt="" src="images/4.jpg"/>
</div>
<div>
<h3>Señor Caja</h3>
<p>
Danbo es un juguete adorable hecho de cajas de cartón recicladas, con ojos redondos y una boca triangular, siempre mostrando una expresión inocente que hace que la gente se sienta compasiva. Danbo es un pequeño ser puro y bondadoso, en su mundo de fantasía puro, siempre desprende un aroma encantador y adorable.</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
Lo mencionado anteriormente es lo que el editor les ha presentado: código de carrusel de JavaScript y barra de desplazamiento personalizada junto con la rueda del ratón, esperando que les sea útil. Si tienen alguna pregunta, déjenme un mensaje y responderé a tiempo. También les agradezco muchísimo el apoyo a la página web de la enseñanza de gritos!