使用javascript创建幻灯片效果

Creating a slide effect using javascript

本文关键字：幻灯片 创建 javascript 使用      更新时间：2023-09-26

我一直在关注Youtube频道Devtips上的一个项目。在我尝试使用JavaScript创建幻灯片效果之前，一切都很顺利。当我单击链接制作幻灯片时，不会发生任何事情。

CSS：

.alt-section{
    padding-top: 50px;
    background-color: #e4e7ec;
}
.section-work{
    overflow-x: hidden;
}
.work-belt{
    width: 200%;
    position: relative;
    left: 0%;
}
.thumb-wrap, .work-wrap{
    width: 50%;
    float: left;
} 
.thumb-container{
    max-width: 960px;
    margin: 0px auto;
    padding-bottom: 100px;
    overflow: auto;
}
.work-container{
    max-width: 960px;
    margin: 0px auto;
}
.work-container > img{
    max-width: 100%;
    margin-bottom: 20px;
}
.work-return{
    width: 25px;
    height: 25px;
    cursor: pointer;
    opacity: 0.8;
    position: absolute;
    margin-left: -45px;
}
@media (max-width: 740px){
    .work-container{
    }
    .work-return{
        margin-left: 0px;
    }
    #work2{
        margin-left: 30px;
    }
}
.work-return:hover{
    opacity: 1;
}
.thumb-unit{
    width: 25%;
    display: block;
    float: left;
    background-image: url(http://goo.gl/yAzmRg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 16%;
    overflow: hidden;
}
.thumb-unit:hover .thumb-overlay{
    -webkit-animation: animation 1000ms linear both;
    animation: animation 1000ms linear both;
}
.thumb-unit2{
    width: 25%;
    display: block;
    float: left;
    background-image: url(http://goo.gl/BDUPbm);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 16%;
    overflow: hidden;
}
.thumb-unit2:hover .thumb-overlay{
    -webkit-animation: animation 1000ms linear both;
    animation: animation 1000ms linear both;
}
.thumb-unit3{
    width: 25%;
    display: block;
    float: left;
    background-image: url(http://goo.gl/dwUDmj);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 16%;
    overflow: hidden;
}
.thumb-unit3:hover .thumb-overlay{
    -webkit-animation: animation 1000ms linear both;
    animation: animation 1000ms linear both;
}
.thumb-unit4{
    width: 25%;
    display: block;
    float: left;
    background-image: url(http://goo.gl/YQknM6);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 16%;
    overflow: hidden;
}
.thumb-unit4:hover .thumb-overlay{
    -webkit-animation: animation 1000ms linear both;
    animation: animation 1000ms linear both;
}
.thumb-unit5{
    width: 25%;
    display: block;
    float: left;
    background-image: url(http://goo.gl/7eAsC3);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 16%;
    overflow: hidden;
}
.thumb-unit5:hover .thumb-overlay{
    -webkit-animation: animation 1000ms linear both;
    animation: animation 1000ms linear both;
}
.thumb-unit6{
    width: 25%;
    display: block;
    float: left;
    background-image: url(http://goo.gl/j6h4iX);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 16%;
    overflow: hidden;
}
.thumb-unit6:hover .thumb-overlay{
    -webkit-animation: animation 1000ms linear both;
    animation: animation 1000ms linear both;
}
.thumb-unit7{
    width: 25%;
    display: block;
    float: left;
    background-image: url(http://goo.gl/sDYiyH);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 16%;
    overflow: hidden;
}
.thumb-unit7:hover .thumb-overlay{
    -webkit-animation: animation 1000ms linear both;
    animation: animation 1000ms linear both;
}
.thumb-unit8{
    width: 25%;
    display: block;
    float: left;
    background-image: url(http://goo.gl/PlRIEF);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 16%;
    overflow: hidden;
}
.thumb-unit8:hover .thumb-overlay{
    -webkit-animation: animation 1000ms linear both;
    animation: animation 1000ms linear both;
}

.thumb-overlay{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    position: absolute;
    top: 0%;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: rgba(248,23,67,0.5);
    height: 100%;
    -webkit-transition-delay: 0.2s; /* Safari */
    transition-delay: 0.2s;
    -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

JavaScript:

$(document).ready(function(){
    });
$(function(){
    workBelt();
});
function workBelt(){
    $('.thumb-unit').click(function(){
        $('.work-belt').css('left','-100%');
    });
    $('.work-return').click(function(){
        $('.work-belt').css('left','0%');
    });
}

HTML:

<section class="alt-section section-work">
<h3 id="work">Work</h3>
<div class="work-belt">
<div class="work-wrap">
<div class="thumb-container">
<div href="" class="thumb-unit">
<div class="thumb-overlay">
<strong>Chouchou</strong>
</div>
</div>
<div href="" class="thumb-unit2">
<div class="thumb-overlay">
<strong>Libellule</strong>
</div>
</div>
<div href="" class="thumb-unit3">
<div class="thumb-overlay">
<strong>Magnifique</strong>
</div>
</div>
<div href="" class="thumb-unit4">
<div class="thumb-overlay">
<strong>Soirée</strong>
</div>
</div>
<div href="" class="thumb-unit5">
<div class="thumb-overlay">
<strong>Tournesol</strong>
</div>
</div>
<div href="" class="thumb-unit6">
<div class="thumb-overlay">
<strong>Coquelicot</strong>
</div>
</div>
<div href="" class="thumb-unit7">
<div class="thumb-overlay">
<strong>Florilège</strong>
</div>
</div>
<div href="" class="thumb-unit8">
<div class="thumb-overlay">
<strong>Pamplemousse</strong>
</div>
</div>
</div>
</div>
<div class="work-wrap">
<div class="work-container">
<div class="work-return"><img src="Img/arrow.png" width="25px" height="25px"></div>
<h3 id="work2">Do work</h3>
<div style="width: 500px; height: 500px; background: #CCC;"></div>
<p>Testing text.</p>
<div style="width: 500px; height: 500px; background: #CCC;"></div>
<p>Testing text.</p>
<div style="width: 500px; height: 500px; background: #CCC;"></div>
<p>Testing text.</p></div>
</div>
</div>
</section>

您应该使用jQuery的$.animate()来执行此操作，因为$.css()直接设置值。

$('.work-belt').animate({'left': '-100%'}, 1000);

试试

blex提供的

解决方案是可以接受的，但我觉得您想只使用css转换来滑动元素。如果是这样的话，你的css样式缺乏重要的转换，这将动画html节点：

.work-belt{
    width: 200%;
    position: relative;
    left: 0%;
    -webkit-transition: left 0.7s linear;
    transition: left 0.7s linear;
}

正如您所看到的，类"工作带"现在在其样式定义中有2行额外的行。

  transition: left 0.7s linear;

上一行告诉浏览器为html节点的"左"属性设置动画。动画应该持续0.7秒（700毫秒）&它应该是线性的。以"-webkit-"前缀开头的行执行相同的操作，但它适用于webkit浏览器。

请看一下jsBin操场上的工作示例。添加了元素：引用到jQuery库+固定css。

另外，请检查您的css样式的其余部分-我很确定像这样的样式：

-webkit-animation: animation 1000ms linear both;
animation: animation 1000ms linear both;

不正确。对于动画，应该使用"过渡"。

希望这对你有帮助。

相关文章：