<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.container{height: 600px;width: 600px;margin: 100px auto;position: relative;overflow: hidden;}
.container ul li{position: relative;}
.container ul li a{width:600px;height: 600px;}
img{width:600px;height: 600px;float: left;}
.container ul li a{display: block;}
.container ul li p{position: absolute;width: 100%;padding: 10px 0;background: rgba(0,0,0,.6);bottom:0;left: 0;text-indent: 2em;font-size: 18px;display: none;z-index: 9999;}
.container .current p {display: block;}
.arrow{display: none;}
.container:hover .arrow{display: block;}
.arrow:hover {background-color: rgba(0, 0, 0, .5);}
.arrow-left,.arrow-right{width: 30px; height: 60px;background-color: rgba(0, 0, 0, 0.1); position: absolute;top: 50%; cursor: pointer;text-align: center;line-height: 60px;}
.arrow-left {left: 0;}
.arrow-right {right: 0;}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a><img src="../si/1.jpg" ><p>11111111111111111111111111111</p></a></li>
<li><a><img src="../si/12.jpg" ><p>22222222222222222222222222222</p></a></li>
<li><a><img src="../si/13.jpg" ><p>3333333333333333333333333333</p></a></li>
<li><a><img src="../si/14.jpg" ><p>444444444444444444444444444444</p></a></li>
<li><a><img src="../si/15.jpg" ><p>555555555555555555555555555555</p></a></li>
</ul>
<div class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</div>
</div>
</body>
<script src="jQuery/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var index = 0;
$(".container>ul>li").eq(index).fadeIn(0).addClass("current").siblings().fadeOut()
$(".arrow-right").click(function(){
index++
console.log(index)
if(index == $(".container>ul>li").length){
index = 0
}
$(".container>ul>li").eq(index).fadeIn(0).addClass("current").siblings().fadeOut()
})
$(".arrow-left").click(function(){
index--
if(index < 0){
index = $(".container>ul>li").length-1
}
$(".container>ul>li").eq(index).fadeIn(0).addClass("current").siblings().fadeOut()
})
var time = setInterval(function(){$(".arrow-right").click()},2000)
$(".container").mouseenter(function(){clearInterval(time)})
$(".container").mouseleave(function(){
time = setInterval(function(){$(".arrow-right").click()},2000)
})
</script>
</html>