效果图：
代码：图片自己换
<!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>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.slider {
height: 340px;
width: 790px;
margin: 100px auto;
position: relative;
}
.slider li {
position: absolute;
display: none;
}
.slider li:first-child {
display: block;
}
.arrow {
display: none;
}
.slider:hover .arrow {
display: block;
}
.arrow-left,
.arrow-right {
font-family: "SimSun", "宋体";
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
margin-top: -30px;
cursor: pointer;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: 700;
font-size: 30px;
}
.arrow-left:hover,
.arrow-right:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.arrow-left {
left: 0;
}
.arrow-right {
right: 0;
}
</style>
</head>
<body>
<div class="slider">
<ul>
<li>
<a href="#"><img src="img/1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/3.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/4.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/5.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/6.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/7.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/8.jpg" alt=""></a>
</li>
</ul>
<!-- 箭头 -->
<div class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</div>
</div>
<script>
$(function() {
var i = 0
$(".arrow-left").click(function() {
i--;
if (i < 0) {
i = 7;
}
// console.log(i)
$("li").eq(i).show().siblings().hide();
})
$(".arrow-right").click(function() {
i++;
if (i > 7) {
i = 0;
}
// console.log(i)
$("li").eq(i).show().siblings().hide();
})
})
</script>
</body>
</html>可见性选择器的使用
根据元素是否显示来选择
:hidden:匹配所有的不可见元素.
:visible:匹配所有的可见元素
一般都是和一种类型的元素搭配使用
$('div:visible).hide(4000);把显示的div用4秒钟隐藏掉。
$( 'div:hidden').show('slow');把隐藏的div慢慢地显示出来。
css()方法
css()方法设置或返回被选元素的一个或多个样式属性
语法：
获取：css("属性名")
设置：css("属性名","属性值")
设置多种样式：
1、css("属性名","属性值").css("属性名","属性值")
2、css({"属性名","属性值","属性名","属性值"})
class操作
除了通过设置css()方法，也可以修改class名来修改样式效果。
addClass()方法
addClass()方法向被选元素添加一个或多个类名。
该方法不会移除已存在的class 属性，仅仅添加一个或多个类名到class属性。
提示:如需添加多个类，请使用空格分隔类名。
语法：$('选择器') . addc1ass('类名') ;
removeClass()方法
removeClass()方法向被选元素移除一个类名。
语法：$('选择器') . removec1ass("类名");
hasClass()方法
hasClass()方法判断被选元素是否包含这个类名。返回布尔类型
语法：alert($("选择器").hasclass("类名"));
toggleClass()方法
toggleClass()方法判断被选元素是否有该类名，如果有就移除他，如果没有，添加他。
语法：$("选择器").toggleclass("类名");
本文含有隐藏内容，请 开通VIP 后查看