自动旋转滑块

自动旋转滑块免费下载 在 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/12270/59430411