<html lang="en">
<head>
<meta charset="UTF-8">
<title>prev next选择</title>
<style>
#banner{height: 330px;width: 980px;border: 1px solid #ffaf0f;overflow: hidden;position: relative;top: 50px;left: 100px}
#banner .table{width: inherit;height: inherit;position:relative;margin: 0px -50px}
#banner .table li{list-style: none;float: left}
#prev{position: absolute;left: 1100px;top: 200px; background: url("prev.png")no-repeat ;border-radius: 50%; width: 75px;height: 71px}
#next{position: absolute;left: 20px;top: 200px;
;background: url("next.png") no-repeat 0.5px 0.5px;border-radius: 50%; width: 75px;height: 71px}
</style>
</head>
<body>
<div id="banner">
<ul class="table">
<li><a href="#" target="_blank"><img src="2.1.png" title=""> </a> </li>
<li><a href="#" target="_blank"><img src="2.2.png" title=""> </a> </li>
<li><a href="#" target="_blank"><img src="2.3.png" title=""> </a> </li>
<li><a href="#" target="_blank"><img src="2.4.png" title=""> </a> </li>
<li><a href="#" target="_blank"><img src="2.5.png" title=""> </a> </li>
<li><a href="#" target="_blank"><img src="2.6.png" title=""> </a> </li>
</ul>
</div>
<button id="prev" onclick="next()"></button>
<button id="next" onclick="prev()"></button>
</body>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
//var intervalObj = window.setInterval(next,500);/*用于轮播*/
var len =$(".table li").length,
liW = $(".table li").outerWidth(true);
$(".table").css("width",len*liW);
function next() {
$(".table li:first-child").animate({
marginLeft:"-980px" /*移动多少*/
},1000,function () {
var tem = $(this).clone();/*克隆函数*/
$(this).remove();/*删除*/
tem.css({marginLeft:"0"});
$(".table").append(tem);/*添加到头部*/
});
}
function prev() {
var tem = $(".table li:last-child").clone();
$(".table li:last-child").remove();
tem.css({ marginLeft:"-980px"});
$(".table").prepend(tem);
$(".table li:first-child").animate({marginLeft:"0"},1000);
}
</script>
</html>
