<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.stage{
width:300px;
height: 200px;
border: solid 5px;
margin: 0px auto;
margin-top: 55px;
/*overflow: hidden;*/
position: relative;
}
.banner_item{
width: 300px;
height: 200px;
background: green;
float: left;
color: white;
font-size: 100px;
text-align: center;
line-height: 200px;
}
.banner{
width: 1500px;
height: 200px;
}
.l_btn,.r_btn{
width: 20px;
height: 200px;
font-size: 20px;
line-height: 200px;
text-align: center;
background-color:lightslategray ;
opacity: 0.5;
position: absolute;
top: 0px;
}
.l_btn{
left: 0px;
}
.r_btn{
right: 0px;
}
.l_btn:hover,.r_btn:hover{
cursor: pointer;
opacity:0.8
}
</style>
</head>
<body>
<div class="stage">
<div class="l_btn"><</div>
<div class="r_btn">></div>
<div class="banner" style="margin-left: 0px;">
<div class="banner_item" >1</div>
<div class="banner_item" >2</div>
<div class="banner_item" >3</div>
<div class="banner_item" >4</div>
<div class="banner_item" >5</div>
</div>
<div>
</body>
</html>
<script type="text/jscript" src="js/jquery-3.2.1.min.js"></script>
<script>
var l_btn=$(".l_btn");
var r_btn=$(".r_btn");
var banner=$(".banner");
var count=1;
l_btn.click(function(){
if(count!=5){
banner.animate(
{
marginLeft:count*(-300) +"px"
},
1000,
function(){
count++
})
}
})
r_btn.click(function(){
banner.stop()
if(count!=1){
banner.animate(
{
marginLeft:(count-2)*(-300) +"px"
},
1000,
function(){
count--;
})
}
})
</script>
