轮播图-左右运动版
实现思路*很重要
导语:
渐隐渐现 左右运动的 3D版本的……
基础html结构:
.container
+固定一帧的宽高
+overflow:hidden
.wrapper
真实内容的盒子,也是真实运动的盒子
transform:xxx / left:xxx
transition:all 0.3s ease 0s;
.wrapper在.container中向左移动,每次移动一帧的宽度
重点
无缝衔接:
把第一张原封不动地克隆一份一模一样地放在末尾
第四张时,再往后走轮播到克隆的第一张;这个时候做一件事,从当前克隆的第一张立马啪蹦回到真实的第一张;从第一张立即蹦到第一张无动画,肉眼是无感知的;
原理:
-
克隆一份放在末尾;
-
当轮播到最后一帧的时候,继续往后走,此时出现在视窗中的是克隆出来的第一帧;当克隆的这个再往后走的时候,那这个时候,做一件事情,让.wrapper瞬间回滚到最初始的位置;这个瞬间蹦回无动画,所以肉眼是无感知的,这样就实现了无缝衔接;
-
之后依然继续正常地向后轮播,第二帧、第三帧……;
和视频中的做法稍有不同:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.3.min.js"></script>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container{
width: 1200px;
height: 240px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.wrapper{
width: 10000px;
height: 240px;
display: flex;
position: absolute;
left: 0;
/*transform: translateX(0);*/
/*transition: all 0.3s;*/
}
.wrapper .slider{
width: 1200px;
height: 240px;
}
.slider img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="slider"><img src="../banner/banner-0.png" alt=""></div>
<div class="slider"><img src="../banner/banner-1.png" alt=""></div>
<div class="slider"><img src="../banner/banner-2.png" alt=""></div>
<div class="slider"><img src="../banner/banner-3.png" alt=""></div>
<div class="slider"><img src="../banner/banner-0.png" alt=""></div>
</div>
</div>
<script>
let frame=0;
let $container=$('.container')undefined$wrapper=$container.children('.wrapper');
let timer=null;
timer=window.setInterval(()=>{
frame++;
$wrapper.animate({
// animate不支持css3中的一些样式
left:`${frame*-1200}px`undefined
}undefined300undefined()=>{
if(frame>3){
$wrapper.css({
left:`0`undefined
})
frame=0;
}
})
// 这是用transfrom的做法
// $wrapper.css({
// transform:`translateX(${frame*-1200}px)`
// }undefined300)
}undefined1000)
</script>
</body>
</html>
UI完善:箭头、指示点
左右按钮实现左右切换,下方指示点快速定位到某一帧、运动的时候焦点对齐,鼠标悬浮暂停……
分页器样式
display:inline-block 也能让li在同一行,每个li和li之间空格和enter当做一个占位符,会产生间隙,让父元素font-size:0
雪碧图的用法,用background-position值,图片往左走postion为负数
完整功能实现*重要
封装思想:
要操作哪些功能:自动轮播,点击左右切换功能,焦点对齐及点击焦点切换……
要操作的元素:两个按钮,底部焦点,container,wrapper
主要是左按钮处理:
往左走边界判断:
若<0,从真实的第一张立马蹦到克隆的第一张,然后再运动到索引为3这个位置;
与轮播边界的区别:
轮播边界是克隆的那张再往后走的时候,等于边界是克隆的那一张;而左按钮是自身最左边的第一张;
代码:
这里还加一个防抖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.3.min.js"></script>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container{
width: 1200px;
height: 240px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.wrapper{
width: 10000px;
height: 240px;
display: flex;
position: absolute;
left: 0;
/*transform: translateX(0);*/
/*transition: all 0.3s;*/
}
.wrapper .slider{
width: 1200px;
height: 240px;
}
.slider img{
width: 100%;
height: 100%;
}
.pagination {
position: absolute;
bottom: 10px;
height: 20px;
padding: 5px;
left: 50%;
transform: translateX(-50%);
}
.pagination li{
cursor: pointer;
width: 10px;
height: 10px;
background: #fff;
opacity: 0.5;
border-radius: 5px;
z-index: 999;
float: left;
list-style: none;
margin-right: 10px;
}
.pagination li.active{
opacity: 1;
}
.arrow{
opacity: 0.3;
width: 30px;
height: 30px;
position: absolute;
top: 50%;
cursor: pointer;
transform: translateY(-50%);
}
.left{
left: 0;
transform: rotate(180deg) translateY(50%);
}
.right{
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="slider"><img src="../banner/banner-0.png" alt=""></div>
<div class="slider"><img src="../banner/banner-1.png" alt=""></div>
<div class="slider"><img src="../banner/banner-2.png" alt=""></div>
<div class="slider"><img src="../banner/banner-3.png" alt=""></div>
<div class="slider"><img src="../banner/banner-0.png" alt=""></div>
</div>
<!--宽度和高度让里面的li撑开,定位之后为内容的宽高-->
<ul class="pagination">
<li data-frame="0" class="active"></li>
<li data-frame="1"></li>
<li data-frame="2"></li>
<li data-frame="3"></li>
</ul>
<div class="arrow right" onclick="next('right')">
<img src="../img/right.jpeg" alt="" width="30" height="30">
</div>
<div class="arrow left" onclick="turnLeft()">
<img src="../img/right.jpeg" alt="" width="30" height="30">
</div>
</div>
<script>
let carouselModule=(function () {
let frame=0;
let $container=$('.container')undefined$wrapper=$container.children('.wrapper')undefined$dotList=$('ul.pagination li')undefined$arrowRight=$('.arrow.right')undefined$arrowLeft=$('.arrow.left');
let timer=null;
let interval=3000;
function turnLeft() {
frame--;
if(frame<0){
$wrapper.css({
left:`${4*-1200}px`undefined
})
frame=3;
}
$wrapper.animate({
left:`${frame*-1200}px`undefined
}undefined300)
setDotted()
}
function handlePagination() {
// 循环绑定事件
$dotList.each((indexundefinedli)=>{
$(li).on('click'undefinedfunction () {
frame=Number($(this).index());
$wrapper.animate({
left:`${frame*-1200}px`undefined
}undefined300)
setDotted()
})
})
}
function setDotted(){
// 设置指示点
let index=frame+1;
index>4?index=1:null
$(`ul.pagination li`).removeClass('active')
$(`ul.pagination li:nth-child(${index})`).addClass('active')
}
function autoPlay() {
frame++;
if(frame>=5){
// 克隆的那一张再往后走的时候,再瞬间蹦回
$wrapper.css({
left:`0px`undefined
})
frame=1;
}
$wrapper.animate({
left:`${frame*-1200}px`undefined
}undefined300)
setDotted()
}
return{
init(){
timer=window.setInterval(autoPlayundefinedinterval)
// pagination绑事件
handlePagination()
$arrowRight.click(autoPlay)
$arrowLeft.click(turnLeft)
$container.on('mouseenter'undefined()=>window.clearInterval(timer))
.on('mouseleave'undefined()=>timer=window.setInterval(autoPlayundefinedinterval))
}
}
})();
carouselModule.init()
</script>
</body>
</html>
基于swiper
现成的插件,或者是自己封装好的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/swiper.min.css">
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.swiper-container{
width: 1200px;
height: 240px;
}
.swiper-container img{
width: 1200px;
height: 240px;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../banner/banner-0.png" alt=""></div>
<div class="swiper-slide"><img src="../banner/banner-1.png" alt=""></div>
<div class="swiper-slide"><img src="../banner/banner-2.png" alt=""></div>
<div class="swiper-slide"><img src="../banner/banner-3.png" alt=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="../js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container'undefined {
// autoplay: trueundefined//可选选项,自动滑动
loop:trueundefined
autoplay: {
disableOnInteraction: falseundefined
}undefined
pagination: {
el: '.swiper-pagination'undefined
clickable :trueundefined
}undefined
navigation: {
nextEl: '.swiper-button-next'undefined
prevEl: '.swiper-button-prev'undefined
}undefined
})
</script>
</body>
</html>