classic:slide-version 2.0,优化了代码，增加了新效果

最新推荐文章于 2023-02-24 19:45:47 发布

帆、叶子

最新推荐文章于 2023-02-24 19:45:47 发布

阅读量145

点赞数

本文链接：https://blog.csdn.net/weixin_45454485/article/details/119767649

版权

本文档详细介绍了如何使用CSS和JavaScript实现一个经典的幻灯片展示效果，包括图片淡入动画、箭头及控制器交互。代码经过部分重构，新增了幻灯片切换功能，同时提供了幻灯片的前进和后退按钮，以及底部的控制器长条，用户可以通过点击直接跳转至指定幻灯片。此外，还展示了幻灯片容器、CSS箭头样式、标题和数字文本的样式定义。

摘要由CSDN通过智能技术生成

classic： slide-version 2.0，增加了新代码，代码进行部分重构，增加了新效果.example：

section ：slideshow

/*slideShow幻灯片*/
.mySlides {display:none;}
/* 幻灯片容器 */
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
/*css箭头*/
.arrowsright{
   display: inline-block;
       width:18px;
       height:18px;
border-top: 6px solid gray;
border-right: 6px solid gray;
transform: rotate(45deg);
       background:none;
   }
.arrowsleft{
   display: inline-block;
       width:18px;
       height:18px;
border-bottom: 6px solid gray;
border-left: 6px solid gray;
transform: rotate(45deg);
       background:none;
   }
/* 下一张 & 上一张按钮 */
.prev, .next {
cursor: pointer;
position: absolute;
top: 40%;
width: 20px;
   height:20px;
padding: 20px;
font-size: 18px;
transition:3s ease;/*此过渡属性结合rgba()函数使用背景色过渡变换效果*/
border-radius: 50%;
   margin:15px;
}

/* 定位 "下一张" 按钮靠右 */
.next {
right: 0px;
}

/* 当鼠标悬停时修改背景色*/
.prev:hover, .next:hover {
background-color: rgba(0,0,555,0.5);

}

/* 标题文本 */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 28px;
width: 100%;
text-align: center;
}

/* 数字文本 (1/3 等) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* 长条形控制器 */
.square {
cursor:pointer;
height: 3px;
width: 80px;
margin: 0 2px;
display: inline-block;
/*background-image线性渐变效果*/
background-image:linear-gradient(to right, #6CC, #699);
}
/* 长条形控制器背景变换 */
.active, .square:hover {
background-color: #717171;
}

/*当前幻灯片容器current*/
.currentPage{
   position:absolute;
   bottom:12px;
   left:42%;
   }

/* 图片淡出动画 */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
/*图片透明度渐变函数*/
@-webkit-keyframes fade {
from {opacity: 0.5}
to {opacity: 1}
}

@keyframes fade {
from {opacity: 0.5}
to {opacity: 1}
}

<script>
/*slideShow JS*/
var slideIndex = 0;
showSlides(slideIndex);

function plusSlides(n) {//传递两个参数-1或者+1并对默认slideIndex = 1;索引值的重新计算赋值
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}