我正在尝试制作一个具有过渡效果的图像幻灯片,如图所示。不幸的是,我只有这个 gif 可以浏览,我无法找到实时网络示例。幻灯片应一次显示 3 张图像,然后滑动到下一张 3 张图像,依此类推。我开始使用光滑的滑块为我完成大部分幻灯片工作(这不是必需的(。但是我很难重新创建看起来像样本中效果的过渡。我尝试在图像之间对填充进行动画处理,但这会导致图像更改大小并导致图像偏离中心。在这种情况下,使用box-sizing: border-box
没有帮助。有关如何创建此过渡的任何帮助将不胜感激。这是我的代码:
$(document).ready(function(){
$('.slider').slick({
infinite: true,
arrows: true,
slidesToShow: 3,
slidesToScroll: 3,
speed: 500
});
});
.wrapper{
position: relative;
box-sizing: border-box;
}
.slick-slide img{
width:100%;
box-sizing:border-box;
}
.slick-slide{
padding: 0;
box-sizing: border-box;
}
.slick-active{
animation: slidetransition;
animation-duration: 3s;
}
@keyframes slidetransition {
0% {
padding: 0px;
}
50% {
padding: 0px 25px;
}
100% {
padding:0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="wrapper">
<div class="slider">
<div class="group1">
<img src="http://placehold.it/350x150/292929/dd0909&text=Slide_1">
</div>
<div class="group1">
<img src="http://placehold.it/350x150/292929/dd6809&text=Slide_2">
</div>
<div class="group1">
<img src="http://placehold.it/350x150/292929/fdff3b&text=Slide_3">
</div>
<div class="group2">
<img src="http://placehold.it/350x150/292929/3bff3b&text=Slide_4">
</div>
<div class="group2">
<img src="http://placehold.it/350x150/292929/5d87ff&text=Slide_5">
</div>
<div class="group2">
<img src="http://placehold.it/350x150/292929/ab8df8&text=Slide_6">
</div>
</div>
</div>
如果您可以将项目分组为 3 组,则此解决方案可以为您工作。
我正在设置不同的延迟,以达到项目单独移动和再次分组的效果
var page = 1;
window.onload = function() {
setInterval(changePage, 4000);
}
function changePage() {
var previous = document.querySelector(".previous");
if (previous) {
previous.classList.remove("previous");
}
var active = document.querySelector(".active");
active.classList.remove("active");
active.classList.add("previous");
page++;
if (page > 3) {
page = 1;
}
var id = "page" + page;
var newActive = document.getElementById(id);
newActive.classList.add("active");
}
.carousel {
height: 150px;
width: 500px;
position: relative;
}
.page {
width: 100%;
height: 100%;
display: flex;
position: absolute;
overflow: hidden;
}
.elem {
height: 98%;
width: 33%;
font-size: 100px;
border: solid 1px black;
transition: transform 1s;
transform: translateX(300%);
opacity: 0;
}
.active .elem {
transform: translateX(0%);
opacity: 1;
}
.previous .elem {
transform: translateX(-300%);
opacity: 1;
}
.elem:nth-child(1) {
background-color: tomato;
transition-delay: 0s;
}
.elem:nth-child(2) {
background-color: yellow;
transition-delay: 0.1s;
}
.elem:nth-child(3) {
background-color: lightblue;
transition-delay: 0.2s;
}
.active .elem:nth-child(1) {
transition-delay: 0.3s;
}
.active .elem:nth-child(2) {
transition-delay: 0.4s;
}
.active .elem:nth-child(3) {
transition-delay: 0.5s;
}
<div class="carousel">
<div class="page active" id="page1">
<div class="elem">1</div>
<div class="elem">1</div>
<div class="elem">1</div>
</div>
<div class="page" id="page2">
<div class="elem">2</div>
<div class="elem">2</div>
<div class="elem">2</div>
</div>
<div class="page" id="page3">
<div class="elem">3</div>
<div class="elem">3</div>
<div class="elem">3</div>
</div>
</div>
这是另一个片段,使用 nbutton 和响应式
var page = 1;
var numPages = 4;
function forward() {
changePage(1);
}
function back() {
changePage(-1);
}
function changePage (inc) {
var ele = document.querySelector(".carousel");
if (inc > 0) {
ele.className = "carousel forward";
} else {
ele.className = "carousel back";
}
page += inc;
if (page > numPages) {
page = 1;
}
if (page < 1) {
page = numPages;
}
var id = page - 3;
if (id < 0) {
id += numPages;
}
document.getElementById("page" + (id % numPages)).className = "page";
id ++;
document.getElementById("page" + (id % numPages)).className = "page left";
id ++;
document.getElementById("page" + id % numPages).className = "page active";
id ++;
document.getElementById("page" + id % numPages).className = "page right";
id ++;
document.getElementById("page" + id % numPages).className = "page";
}
.carousel {
height: 200px;
width: 98%;
border: solid 3px black;
position: relative;
margin-left: 1%;
}
.page {
eft: 300px;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
position: absolute;
overflow: hidden;
}
.page:nth-child(2) {
op: 100px;
}
.page:nth-child(3) {
op: 200px;
}
.elem {
height: 100%;
width: 33.33%;
font-size: 100px;
transition: transform 1s;
transform: translateX(300%);
z-index: 1;
opacity: 0;
}
.active .elem {
transform: translateX(0%);
z-index: 2;
opacity: 1;
}
.left .elem {
transform: translateX(-300%);
}
.forward .left .elem {
z-index: 2;
opacity: 1;
}
.right .elem {
transform: translateX(300%);
}
.back .right .elem {
z-index: 2;
opacity: 1;
}
.elem:nth-child(1) {
background-color: tomato;
}
.elem:nth-child(2) {
background-color: yellow;
}
.elem:nth-child(3) {
background-color: lightblue;;
}
.back .right .elem:nth-child(3) {
transition-delay: 0s;
}
.back .right .elem:nth-child(2) {
transition-delay: 0.1s;
}
.back .right .elem:nth-child(1) {
transition-delay: 0.2s;
}
.back .active .elem:nth-child(3) {
transition-delay: 0.3s;
}
.back .active .elem:nth-child(2) {
transition-delay: 0.4s;
}
.back .active .elem:nth-child(1) {
transition-delay: 0.5s;
}
.forward .left .elem:nth-child(1) {
transition-delay: 0s;
}
.forward .left .elem:nth-child(2) {
transition-delay: 0.1s;
}
.forward .left .elem:nth-child(3) {
transition-delay: 0.2s;
}
.forward .active .elem:nth-child(1) {
transition-delay: 0.3s;
}
.forward .active .elem:nth-child(2) {
transition-delay: 0.4s;
}
.forward .active .elem:nth-child(3) {
transition-delay: 0.5s;
}
button {
font-size: 20px;
margin: 20px;
}
<div class="carousel forward">
<div class="page active" id="page0">
<div class="elem">1</div>
<div class="elem">1</div>
<div class="elem">1</div>
</div>
<div class="page right" id="page1">
<div class="elem">2</div>
<div class="elem">2</div>
<div class="elem">2</div>
</div>
<div class="page" id="page2">
<div class="elem">3</div>
<div class="elem">3</div>
<div class="elem">3</div>
</div>
<div class="page left" id="page3">
<div class="elem">4</div>
<div class="elem">4</div>
<div class="elem">4</div>
</div>
</div>
<button onclick="back()">back</button>
<button onclick="forward()">forward</button>
对于性能,使用纯CSS进行简单的转换:翻译要好得多。如果您只需要 2 组 3 张图像,则以下内容就可以了
/*just toggles the "toggle" class on the "slider" element
/* when clicking the toggle button*/
document.getElementById("toggle").addEventListener("click", function(){
document.getElementById("slider").classList.toggle("toggle");
});
.wrapper{
/*hides the 3 overflowing imgs, preventing scrollbars*/
width:100%; overflow:hidden;
}
.slider{
/*classic inline-block whitespace hack*/
font-size:0;
/* so the 2 "groups" are side by side */
width:200%;
/*sets the transition between groups with some delay*/
transition: transform 1.2s;
}
.slider img{
/*sizes the imgs acording to the fixed quantity*/
width:calc(100% / 6);
/*set the transition for the imgs separation*/
transition: transform 1s;
/*sets the default value for transform*/
transform:translateX(0);
}
/*when "toggle" is not active, last images move to the right*/
.slider img:nth-child(4){transform:translateX(40px);}
.slider img:nth-child(5){transform:translateX(80px);}
.slider img:nth-child(6){transform:translateX(120px);}
/*when active, the slide moves 50% left so the second group shows*/
.slider.toggle{transform:translateX(-50%)}
/*when active, first two images move displaces to the left*/
.slider.toggle img:nth-child(1){transform:translateX(-80px);}
.slider.toggle img:nth-child(2){transform:translateX(-40px);}
/*when active, last two images reset to regular position*/
.slider.toggle img:nth-child(4){transform:translateX(0);}
.slider.toggle img:nth-child(5){transform:translateX(0);}
.slider.toggle img:nth-child(6){transform:translateX(0);}
<div class="wrapper">
<div class="slider" id="slider">
<img src="http://placehold.it/350x150/292929/dd0909&text=Slide_1">
<img src="http://placehold.it/350x150/292929/dd6809&text=Slide_2">
<img src="http://placehold.it/350x150/292929/fdff3b&text=Slide_3">
<img src="http://placehold.it/350x150/292929/3bff3b&text=Slide_4">
<img src="http://placehold.it/350x150/292929/5d87ff&text=Slide_5">
<img src="http://placehold.it/350x150/292929/ab8df8&text=Slide_6">
</div>
</div>
<button id="toggle">toggle slides</button>
随意使用 javascript 自动切换组,只需切换"切换"类列表即可。我使用按钮切换仅用于测试目的。