JQuery简单轮换广告-第二版

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>