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_list{position:absolute; right:10px; bottom:10px}
.button{width:20px; height:20px;margin-right:5px; filter: alpha(opacity=50); opacity: 0.5; background: #00B83F; float:left;}
.button_cur{background: red;};
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 $button = $(".button");
var timeout = timeoutAuto = 0;
var curIndex = 0;
$button.hover(function(){
var $this = $(this);
$button.removeClass("button_cur");
$this.addClass("button_cur");
clearTimeout(timeout);
clearInterval(timeoutAuto);
timeout = setTimeout(function(){
curIndex = $button.index($this);
$boxAbsolute.animate({left: -curIndex * 480});
},200);
}, function(){
auto();
});
function auto(){
timeoutAuto = setInterval(function(){
curIndex++;
if(curIndex <=0) curIndex = 0;
if(curIndex > $button.length - 1) curIndex = 0;
$button.removeClass("button_cur").eq(curIndex).addClass("button_cur");
$boxAbsolute.animate({left: -curIndex * 480});
},2000);
}
auto();
});
HTML:
<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_list">
<div class="button button_cur">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button">4</div>
</div>
</div>
</div>