10.用插件来些轮播图
插件网址:https://www.swiper.com.cn/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 引入swiper.css -->
<link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />
<!-- 引入swiper.js -->
<script src="./swiper/swiper-bundle.min.js"></script>
<style>
.swiper {
width: 570px;
height: 490px;
position: relative;
overflow: hidden;
}
.swiper-pagination {
bottom: 30px !important;
}
.swiper {
--swiper-theme-color: #ff6600; /* 设置Swiper风格 */
--swiper-navigation-color: #00ff33; /* 单独设置按钮颜色 */
--swiper-navigation-size: 50px; /* 设置按钮大小 */
}
</style>
</head>
<body>
<div class="swiper">
<!-- 图片 -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img/1.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="./img/2.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="./img/3.jpg" alt="" />
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
var mySwiper = new Swiper(".swiper", {
// 设置图片的切换模式
effect: "cube",
// 设置自动切换的时间
autoplay: {
delay: 5000,
},
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar",
},
});
</script>
</body>
</html>
11.透明效果
面试题:
设置透明有几种方式?能说一说他们之间的区别?
1、opacity是属性,rgba、transparent是属性值
2、rgba、transparent是属性值,他必须要跟在特定的属性后,
例如 background-color、color、border-color等
3、opacity是属性,它有继承性,给祖先元素设置,会继承给它的后代元素
相当于在元素前面放一层玻璃,整个元素都是朦朦胧胧的
rgba、transparent是没有继承的,给谁设置,谁就有