<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.slider{
width: 790px;
height: 340px;
margin: 50px auto 0;
position: relative;
}
.slider li{
position: absolute;
display: none;
}
.slider li:first-child{
display: block;
}
.arrow_left,.arrow_right{
position: absolute;
top: 50%;
width: 30px;
height: 60px;
margin-top: -30px;
text-align: center;
line-height: 60px;
font-family: "宋体";
font-weight: 700;
color: #fff;
font-size: 30px;
background-color: rgba(0,0,0,.2);
}
.arrow_left:hover,.arrow_right:hover{
background-color: rgba(0,0,0,.5);
}
.arrow_left{
left: 0;
}
.arrow_right{
right: 0;
}
</style>
</head>
<body>
<div class="slider">
<ul>
<li><img src="../images/1.jpg" alt=""></li>
<li><img src="../images/2.jpg" alt=""></li>
<li><img src="../images/3.jpg" alt=""></li>
<li><img src="../images/4.jpg" alt=""></li>
<li><img src="../images/5.jpg" alt=""></li>
<li><img src="../images/6.jpg" alt=""></li>
<li><img src="../images/7.jpg" alt=""></li>
<li><img src="../images/8.jpg" alt=""></li>
</ul>
<div class="arrow">
<span class="arrow_left"><</span>
<span class="arrow_right">></span>
</div>
</div>
<script type="text/javascript" src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function() {
var index = 0;
$(".arrow_right").click(function () {
index++;
if(index == $(".slider li").length){
//如果在最后一张图片上再点击右箭头,则回到第1张
index = 0;
}
$(".slider li").eq(index).fadeIn().siblings().fadeOut();
})
$(".arrow_left").click(function () {
index--;
if(index == -1){
//如果在第一张图片上再点击左箭头,则回到最后一张
index = $(".slider li").length-1;
}
$(".slider li").eq(index).fadeIn().siblings().fadeOut();
})
})
</script>
</body>
</html>
上述运行结果: