<html>
<head>
<title>轮播</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
#dingwei{
position:absolute;
width:300px;
height:300px;
left:300px;
top:100px;
overflow: hidden;
}
#dingwei ul{
width: 300px;
height:300px;
}
#dingwei ul li{
display:inline;
float:left;
position:absolute;
}
#dingwei ul img{
width:300px;
height:300px;
}
#dingwei>span{
position:absolute;
z-index:99;
width:10%;
height:40px;
font-size:50px;
top:40%;
line-height:100%;
text-align:center;
cursor:pointer;
display:none;
}
#right{
left:90%;
}
</style>
<script src="jquery-3.1.1.min.js">
</script>
</head>
<body>
<div id="dingwei">
<span id="left"><</span>
<span id="right">></span>
<ul id="pics">
<li style="z-index:4"><a><img src="1.jpg"/></a></li>
<li style="z-index:3"><a><img src="2.jpg"/></a></li>
<li style="z-index:2"><a><img src="3.jpg"/></a></li>
<li style="z-index:1"><a><img src="4.jpg"/></a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#dingwei").mouseover(function(){
$("#dingwei span").css("display","block");
});
$("#dingwei").mouseout(function(){
$("#dingwei span").css("display","none");
});
$("#right").click(function(){
var last=$("#pics li").last();
$(last).css({"left":-($("#pics img").width()),"z-index":"5"});
$(last).animate({left:0},function(){
$("#pics li").each(function(){
$(this).css("z-index",parseInt($(this).css("z-index"))-1);
});
$("#pics li").first().before($(last));
});
});
$("#left").click(function(){
var first=$("#pics li").first();
$(first).animate({left:-$(first).find("img").width()},function(){
var d="#pics li:not(:eq("+$("#pics li").index($(first))+"))";
$(d).each(function(){
var zindex=parseInt($(this).css("z-index"));
$(this).css("z-index",zindex+1);
});
$("#pics").append($(first).detach().css({"z-index":"1","left":"0"}));
});
});
});
</script>
</body>
</html>
Hold on, everything is possible.