Afirmação:
Depois que o mouse passa pelo módulo do carrossel, os botões esquerdo e direito são exibidos e, quando à esquerda, os botões esquerdo e direito ficam ocultos
Clique no botão direito uma vez, a imagem será reproduzida à esquerda e assim por diante, o botão esquerdo é o mesmo
Enquanto a imagem é reproduzida, o módulo do pequeno círculo abaixo muda junto com ela
Clique no pequeno círculo para reproduzir a imagem correspondente
Se o mouse não passar no carrossel, o carrossel irá automaticamente reproduzir a imagem
Passe o mouse, módulo de diagrama de carrossel, parada automática de reprodução
Efeito de realização:
Código:
autoPlay.html (copie e salve como um arquivo html, abra-o para ver o efeito):
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
< link rel = " stylesheet" href = " https://blog-static.cnblogs.com/files/jacklzx/autoPlay.css" >
< script src = " https://blog-static.cnblogs.com/files/jacklzx/animate.js" > </ script>
< script src = " https://blog-static.cnblogs.com/files/jacklzx/autoPlay.js" > </ script>
</ head>
< body>
< div class = " focus" >
< a href = " javascript:;" class = " arrow-l" > < </ a>
< a href = " javascript:;" class = " arrow-r" > > </ a>
< ul>
< li>
< a href = " javascript:;" > < img src = " https://s1.ax1x.com/2020/10/12/0W1wlt.jpg" alt = " " > </ a>
</ li>
< li>
< a href = " javascript:;" > < img src = " https://s1.ax1x.com/2020/10/12/0W3nHS.jpg" alt = " " > </ a>
</ li>
< li>
< a href = " javascript:;" > < img src = " https://s1.ax1x.com/2020/10/12/0Wtrmq.jpg" alt = " " > </ a>
</ li>
< li>
< a href = " javascript:;" > < img src = " https://s1.ax1x.com/2020/10/12/0W1NYd.jpg" alt = " " > </ a>
</ li>
</ ul>
< ol class = " circle" >
</ ol>
</ div>
</ body>
</ html>
autoPlay.css :
li {
list-style : none;
}
a {
text-decoration : none;
}
* {
margin : 0;
padding : 0;
}
body {
background-color : #00e1ff;
}
.focus {
overflow : hidden;
position : relative;
width : 721px;
height : 455px;
margin : 100px auto;
box-shadow : 10px 10px 20px rgba ( 0, 0, 0, 0.6) ;
border-radius : 40px;
}
.focus ul {
position : absolute;
top : 0;
left : 0;
width : 600%;
}
.focus ul li {
float : left;
}
.arrow-l {
display : none;
position : absolute;
top : 50%;
left : -12px;
margin-top : -20px;
width : 40px;
height : 40px;
background : rgba ( 0, 0, 0, .3) ;
text-align : center;
line-height : 40px;
color : #fff;
font-size : 18px;
border-radius : 0 50% 50% 0;
z-index : 999;
}
.arrow-r {
display : none;
position : absolute;
top : 50%;
right : -12px;
margin-top : -20px;
width : 40px;
height : 40px;
background : rgba ( 0, 0, 0, .3) ;
text-align : center;
line-height : 40px;
color : #fff;
font-size : 18px;
border-radius : 50% 0 0 50%;
z-index : 999;
}
.circle {
position : absolute;
bottom : 10px;
left : 50%;
transform : translateX ( -50%) ;
}
.circle li {
float : left;
width : 12px;
height : 12px;
border : 2px solid rgba ( 255, 255, 255, .5) ;
margin : 0 4px;
border-radius : 50%;
cursor : pointer;
}
.current {
background-color : #fff;
box-shadow : 0 0 10px #fff;
}
autoPlay.js :
window. addEventListener ( 'load' , function ( ) {
var arrow_l = document. querySelector ( '.arrow-l' ) ;
var arrow_r = document. querySelector ( '.arrow-r' ) ;
var focus = document. querySelector ( '.focus' ) ;
var focusWidth = focus. offsetWidth;
var step = 5 ;
focus. addEventListener ( 'mouseenter' , function ( ) {
arrow_l. style. display = 'block' ;
arrow_r. style. display = 'block' ;
clearInterval ( timer) ;
timer = null ;
} ) ;
focus. addEventListener ( 'mouseleave' , function ( ) {
arrow_l. style. display = 'none' ;
arrow_r. style. display = 'none' ;
timer = setInterval ( function ( ) {
arrow_r. click ( ) ;
} , 2000 ) ;
} ) ;
var ul = focus. querySelector ( 'ul' ) ;
var ol = focus. querySelector ( '.circle' ) ;
for ( var i = 0 ; i < ul. children. length; i++ ) {
var li = document. createElement ( 'li' ) ;
li. setAttribute ( 'index' , i) ;
ol. appendChild ( li) ;
li. addEventListener ( 'click' , function ( ) {
for ( var i = 0 ; i < ol. children. length; i++ ) {
ol. children[ i] . className = '' ;
}
this . className = 'current' ;
var index = this . getAttribute ( 'index' ) ;
num = index;
circle = index;
animate ( ul, - index * focusWidth, step) ;
} ) ;
}
ol. children[ 0 ] . className = 'current' ;
var num = 0 ;
var circle = 0 ;
var first = ul. children[ 0 ] . cloneNode ( true ) ;
ul. appendChild ( first) ;
arrow_r. addEventListener ( 'click' , function ( ) {
if ( num == ul. children. length - 1 ) {
ul. style. left = 0 ;
num = 0 ;
}
num++ ;
animate ( ul, - num * focusWidth, step) ;
circle++ ;
circle = circle == ol. children. length ? 0 : circle;
circleChange ( ) ;
} ) ;
arrow_l. addEventListener ( 'click' , function ( ) {
if ( num == 0 ) {
num = ul. children. length - 1 ;
ul. style. left = - num * focusWidth + 'px' ;
}
num-- ;
animate ( ul, - num * focusWidth, step) ;
circle-- ;
circle = circle < 0 ? ( ol. children. length - 1 ) : circle;
circleChange ( ) ;
} ) ;
function circleChange ( ) {
for ( var i = 0 ; i < ol. children. length; i++ ) {
ol. children[ i] . className = '' ;
}
ol. children[ circle] . className = 'current' ;
}
var timer = setInterval ( function ( ) {
arrow_r. click ( ) ;
} , 2000 ) ;
} ) ;
animate.js :
function animate ( obj, target, time, callback) {
clearInterval ( obj. timer) ;
obj. timer = setInterval ( function ( ) {
var step = ( target - obj. offsetLeft) / 10 ;
step = step > 0 ? Math. ceil ( step) : Math. floor ( step) ;
if ( obj. offsetLeft == target) {
clearInterval ( obj. timer) ;
callback && callback ( ) ;
}
obj. style. left = obj. offsetLeft + step + 'px' ;
} , time) ;
}
Função de animação personalizada animar detalhes