<style type="text/css">
.container1{width:660px;margin:0 auto;padding:0;}
.folio_block{position:absolute;left:50%;top:50%;margin:-140px 0 0 -395px;}
.main_view{float:left;position:relative;}
.window{height:240px;width:660px;-moz-box-shadow:0 0 5px #303030;-webkit-box-shadow:0 0 5px #303030;box-shadow:0 0 5px #303030;border:1px solid #000;margin-top:15px;overflow:hidden;position:relative;}
.image_reel{position:absolute;top:0;left:0;}
.image_reel img{float:left;}
.paging_btrix{position:absolute;bottom:10px;right:-7px;width:178px;height:47px;z-index:100;text-align:center;line-height:40px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUmHb97yfjXb4wP6CZ8RMtZw6eeBOrJGL2liCOiuKOZpjcfC9jmOfo_FbJGsfSmkjSxR6nRb9Jp_SLun4iNbOHxc5M-3ZxOootTmMjbH09FUF00B8J2SxiFVH4OK4J5Q30kfEsYGqWbEvy/s320/paging.png) no-repeat;display:none;}
.paging_btrix a{text-decoration:none;color:#fff;padding:5px;}
.paging_btrix a.active{font-weight:700;background:#920000;border:1px solid #610000;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;}
.paging_btrix a:hover{font-weight:700;}
</style>
<div class="container1">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://i.imgur.com/lZN7Lql.jpg"><img src="http://i.imgur.com/lZN7Lql.jpg" alt="" /></a>
<a href="http://i.imgur.com/rPXebHN.jpg"><img src="http://i.imgur.com/rPXebHN.jpg" alt="" /></a>
<a href="http://i.imgur.com/H13Lrjy.jpg"><img src="http://i.imgur.com/H13Lrjy.jpg" alt="" /></a>
<a href="http://i.imgur.com/MpBPxIB.jpg"><img src="http://i.imgur.com/MpBPxIB.jpg" alt="" /></a>
<a href="http://i.imgur.com/Y1BVB1I.jpg"><img src="http://i.imgur.com/Y1BVB1I.jpg" alt="" /></a>
<a href="http://i.imgur.com/YdVO1UW.jpg"><img src="http://i.imgur.com/YdVO1UW.jpg" alt="" /></a>
</div>
</div>
<div class="paging_btrix">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>
<a href="#" rel="6">6</a>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){$(".paging_btrix").show();$(".paging_btrix a:first").addClass("active");var imageWidth=$(".window").width();var imageSum=$(".image_reel img").size();var imageReelWidth=imageWidth*imageSum;$(".image_reel").css({'width':imageReelWidth});rotate=function(){var triggerID=$active.attr("rel")-1;var image_reelPosition=triggerID*imageWidth;$(".paging_btrix a").removeClass('active');$active.addClass('active');$(".image_reel").animate({left:-image_reelPosition},500)};rotateSwitch=function(){play=setInterval(function(){$active=$('.paging_btrix a.active').next();if($active.length===0){$active=$('.paging_btrix a:first')}rotate()},
5000)};rotateSwitch();$(".image_reel a").hover(function(){clearInterval(play)},function(){rotateSwitch()});$(".paging_btrix a").click(function(){$active=$(this);clearInterval(play);rotate();rotateSwitch();return false})});
</script>