标签：box pexels 滑块 50% 旋转 slider 自动 child class
自动旋转滑块
自动旋转滑块免费下载 在 HTML、CSS 和 JavaScript 中
HTML：
<div class="container">
<div class="slider">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
<div class="box5">
</div>
<div class="box6">
</div>
<div class="box7">
</div>
</div>
</div>
<div id="test"></div>
您还可以下载： HTML 和 CSS 中的文本动画效果
CSS：
。容器{
宽度：100vw；
高度：80vh；
显示：弹性；
证明内容：中心；
对齐项目：中心；
}
.滑块{
高度：750px；
宽度：100vw；
显示：弯曲；
视角：1000px；
位置：相对；
对齐项目：中心；
}
.box1{ background:url('https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
背景尺寸：封面；
背景位置：中心中心；}
.box2{
背景：url('https://images.pexels.com/photos/2559941/pexels-photo-2559941.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
背景尺寸：封面；
背景位置：中心中心；}
.box3{
背景：url('https://images.pexels.com/photos/2356059/pexels-photo-2356059.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
背景尺寸：封面；
背景位置：中心中心；}
.box4{
背景：url('https://images.pexels.com/photos/3274903/pexels-photo-3274903.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
背景尺寸：封面；
背景位置：中心中心；}
.box5{
背景：url('https://images.pexels.com/photos/3618162/pexels-photo-3618162.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
背景尺寸：封面；
背景位置：中心中心；}
.box6{
背景：url('https://images.pexels.com/photos/4256852/pexels-photo-4256852.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
背景尺寸：封面；
背景位置：中心中心；}
.box7{
背景：url('https://images.pexels.com/photos/1891234/pexels-photo-1891234.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
背景尺寸：封面；
背景位置：中心中心；} .slider [class*="box"] {
/* 向左飘浮; */
溢出：隐藏；
边框半径：20px；
过渡：所有 1s 三次贝塞尔曲线（0.68，-0.6，0.32，1.6）；
位置：绝对；
}
.slider [class*="box"]:nth-child(7),
.slider [class*="box"]:nth-child(1) {
宽度：100vh；
高度：60vh；
变换：缩放（0.2）平移（-50%，-50%）；
前10名％;
z-索引：1；
}
.slider [class*="box"]:nth-child(2),
.slider [class*="box"]:nth-child(6) {
宽度：100vh；
高度：60vh；
变换：缩放（0.4）平移（-50%，-50%）；
最高：20%；
z-索引：2；
}
.slider [class*="box"]:nth-child(3),
.slider [class*="box"]:nth-child(5) {
宽度：100vh；
高度：60vh；
变换：缩放（0.6）平移（-50%，-50%）；
最高：30%；
z-索引：3；
}
.slider [class*="box"]:nth-child(4) {
宽度：60vw；
高度：60vh；
边框颜色：#c92026；
颜色：#fff;
变换：缩放（1）平移（-50%，-50%）；
最高：50%；
z-索引：4；
}
.slider [class*="box"]:nth-child(1){
左：-13%；}
.slider [class*="box"]:nth-child(2){
左：-5%；}
.slider [class*="box"]:nth-child(3){
左：10%；}
.slider [class*="box"]:nth-child(4){
左：50%；}
.slider [class*="box"]:nth-child(5){
左：71%；}
.slider [class*="box"]:nth-child(6){
左：85%；}
.slider [class*="box"]:nth-child(7){
左：100%；}
.slider .firstSlide {
-webkit-animation：firstChild 1s；
动画：firstChild 1s；
}
/*买家登陆页面滑块动画*/
@-webkit-keyframes firstChild {
0% {左：100%;变换：比例（0.2）翻译（-50%，-50%）；}
100% {左：-13%；变换：比例（0.2）翻译（-50%，-50%）；}
}
@keyframes firstChild {
0% {左：100%;变换：比例（0.2）翻译（-50%，-50%）；}
100% {左：-13%；变换：比例（0.2）翻译（-50%，-50%）；}
}
JavaScript：
函数旋转（）{
var lastChild = $('.slider div:last-child').clone();
/*$('#test').html(lastChild)*/
$('.slider div').removeClass('firstSlide')
$('.slider div:last-child').remove();
$('.slider').prepend(lastChild)
$(lastChild).addClass('firstSlide')
} window.setInterval(function(){
旋转（）
}, 4000);
HTML、CSS 和 JavaScript 代码片段开启， AllWebCodes.com
完毕！享受 自动旋转滑块片段
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/14324/12530500
标签：box,pexels,滑块,50%,旋转,slider,自动,child,class 来源： https://www.cnblogs.com/amboke/p/16656628.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。