关键在于,需要对CSS的定位的了解,然后通过控制left来控制左右切换(top控制上下切换)
position:relative
position:absolute
CSS:
*{margin: auto }
body{margin:0; padding:0;}
.box{width: 800px; height: 600px; border:1px solid red;text-align: center;}
.box_relative{width: 480px; height: 270px;border: 1px solid red; position: relative; overflow: hidden;}
.box_absolute{width: 100000px;height: 270px; position:absolute; left: 0; top:0}
.box_ad{width: 480px; height:270px; float: left; }
.box_ad_blue{background: #a3bad9;}
.box_ad_green{background: #F0FFE5;}
.button{width: 30px;height: 50px; position:absolute; filter: alpha(opacity=50); opacity: 0.5; background: #00B83F;top:100px; padding-top: 30px}
.button_left{left: 0; }
.button_right{right: 0;}
JavaScript:
<script type='text/javascript' src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
jQuery(document).ready(function(){
var $boxAbsolute = $(".box_absolute");
var boxAdLength = $boxAbsolute.find(".box_ad").length;
var boxAdLengthBak = boxAdLength;
$(".button_left").click(function(){
if(boxAdLength <= 1){ return;}
if($boxAbsolute.is(":animated")) return;
$boxAbsolute.animate({left:"-=480"});
boxAdLength--;
});
$(".button_right").click(function(){
if(boxAdLength >= boxAdLengthBak){ return;}
if($boxAbsolute.is(":animated")) return;
$boxAbsolute.animate({left:"+=480"});
boxAdLength++;
});
});
HTML:
<body>
<div class="box">
<div class="box_relative">
<div class="box_absolute">
<div class="box_ad box_ad_blue">1</div>
<div class="box_ad box_ad_green">2</div>
<div class="box_ad box_ad_blue">3</div>
<div class="box_ad box_ad_green">4</div>
</div>
<div class="button button_left"> < </div>
<div class="button button_right" > > </div>
</div>
</div>
</body>