HMTL
<div class="slider">
<ul >
<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
</ul>
<div class="arrow">
<a href="#" class="arror-l"> < </a>
<a href="#" class="arror-r"> > </a>
</div>
</div>
CSS
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.slider{
width: 500px;
height: 312px;
margin: 100px auto;
position: relative;
}
ul li {
display: none;
position:absolute;
top: 0;
left: 0;
}
ul li:nth-child(1){
display: block;
}
.arror-l,
.arror-r{
width: 30px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: rgba(0,0,0,0.3);
color: rgba(0,0,0,0.6);
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.arror-r{
right: 0;
}
jquery
<script src="jQuery/jquery-1.12.3.js"></script>
<script>
$(function () {
var count=0;
$(".arror-r").click(function () {
count++;
if(count == $(".slider li").length){
count=0;
}
console.log(count);
$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
});
$(".arror-l").click(function () {
count--;
if(count == -1){
count=$(".slider li").length;
}
console.log(count);
$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
});
});
</script>