<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.container{
width:800px;
height:500px;
margin:0px auto;
border:1px solid red;
}
.container ul {
margin:0px;
padding:0px;
list-style-type:none;
}
.container ul li {
list-style-type:none;
}
.container ul li{
display:none;
position:absolute;
}
</style>
</head>
<body>
<div class="container">
<ul id="full">
<li class="active" id="img1" style="display:block;">
<img src="image/img_01.jpg">
</li>
<li id="img2">
<img src="image/img_02.jpg">
</li>
<li id="img3">
<img src="image/img_03.jpg">
</li>
<li id="img4">
<img src="image/img_04.jpg">
</li>
</ul>
</div>
<a href="#" id="prev">previous</a>
<a href="#" id="next">next</a>
<script>
$(document).ready(function(){
$("#prev").click(function(){
var elem= $("#full").children(".active");
if(!elem.is(":last-child"))
{
elem.fadeOut(300);
elem.removeClass("active");
var news= elem.next().addClass("active").fadeIn();
$("#full").children().removeClass("active");
news.addClass("active");
}
else
{
elem.fadeOut(300);
elem.removeClass("active");
var news= $("#full li").first().addClass("active").fadeIn();
$("#full").children().removeClass("active");
news.addClass("active");
}
});
$("#next").click(function(){
var elem= $("#full").children(".active");
if(!elem.is(":last-child"))
{
elem.fadeOut(300);
elem.removeClass("active");
var news= elem.next().addClass("active").fadeIn();
$("#full").children().removeClass("active");
news.addClass("active");
}
else
{
elem.fadeOut(300);
elem.removeClass("active");
var news= $("#full li").first().addClass("active").fadeIn();
$("#full").children().removeClass("active");
news.addClass("active");
}
});
});
</script>
</body>
</html>
