增强版内容轮播器（jQuery.flexslider.js的应用）

效果：

html:

<div class="slider_wrapper">
	<!--图片轮播块start-->
	<div class="flexslider">
		<ul class="slides">
			<li>
            	<a href="#"><img src="images/calrousel1.jpg"></a>
                <!--图片说明文字-->
             	<div class="flex_caption">
                	<h3>我是何昊阳</h3>
                    <p>好男人就是我，我就是何昊阳！！爱生活爱昊阳！！好男人就是我，我就是何昊阳！！爱生活爱昊阳！！好男人就是我，我就是何昊阳！！爱生活爱昊阳！！<</p>
                </div>
            </li>
			<li><a href="#"><img src="images/calrousel2.jpg"></a><div class="flex_caption">
                	<h3>美女自拍</h3>
                    <p>点击这里进入......带去哪实际额</p>
                </div></li>
			<li><a href="#"><img src="images/calrousel3.jpg"></a><div class="flex_caption">
                	<h3>哈玩的</h3>
                    <p>啊首脑四季佛扼喉抚背vsbavbaNJcnjsd</p>
                </div></li>
			<li><a href="#"><img src="images/calrousel4.jpg"></a><div class="flex_caption">
                	<h3>所产生的</h3>
                    <p>水水水水谁谁谁水水水水水水水水水水水水水水水水</p>
                </div></li>
			<li><a href="#"><img src="images/calrousel5.jpg"></a><div class="flex_caption">
                	<h3>请问驱动器</h3>
                    <p>是的v潍坊复合肥合适的水电费水电费</p>
                </div></li>
		</ul>
        
	</div>
    <!--图片轮播块end-->
    <!--时间日期评论块start-->
	<div class="slide_item">
    	<div class="slide_item_inner">
        	<ul>
            	<li id="slideitem_2">
               		    <span class="date">2</span>
                      <span class="time">20:47</span>
                      <span class="comment">comment</span>              
                </li>
                <li id="slideitem_1" class="slide_active">
               		 <span class="date">1</span>
                      <span class="time">20:47</span>
                      <span class="comment">comment</span>                
                </li>
                <li id="slideitem_5">
               		 <span class="date">5</span>
                      <span class="time">20:47</span>
                      <span class="comment">comment</span>                  
                </li>
                <li id="slideitem_4">
               		 <span class="date">4</span>
                      <span class="time">20:47</span>
                      <span class="comment">comment</span>                  
                </li>
                <li id="slideitem_3">
               		 <span class="date">3</span>
                      <span class="time">20:47</span>
                      <span class="comment">comment</span>                  
                </li>
            </ul>
        </div>
     </div>
     <!--时间日期评论块end-->
</div>

css:

 <style>
		*{ padding:0px; margin:0px;}
		.slider_wrapper{ position:relative; width:550px; height:400px; margin:20px auto;}
		.flexslider{ position:relative; top:100px; width:500px; height:300px; border:none;}
		.flex_caption{ position:absolute; top:-100px; width:550px; height:100px;background:#eee;}
		.flex_caption h3{ font-weight:bold; padding:10px 20px 10px 20px; font-size:18px;}
		.flex_caption p{ padding:0px 20px 0px 20px ; font-size:14px; color:#666;}
    	.slides img{ width:500px; height:300px;}
		.flex-control-nav{ bottom:20px; z-index:11; padding-left:30px; text-align:left;}
		.flex-control-paging li a{ width:10px; height:10px; border-radius:0px;}
		.flex-control-paging li a.flex-active{ background:#FFF;}
		.flex-direction-nav li a.flex-next{ width:50px; height:50px; text-indent:9999px; background:url(images/right-nav.png) center center scroll no-repeat rgba(204,204,204,0.6); border-radius:25px; }
		.flex-direction-nav li a.flex-prev{ width:50px; height:50px; text-indent:-999px; background:url(images/left-nav.png)  center center scroll no-repeat rgba(204,204,204,0.6); border-radius:25px;}
		.slide_item{ position:absolute; top:100px; right:0px;  width:100px; height:300px; border:}
		.slide_item_inner{ position:relative; overflow:hidden; }
		.slide_item_inner ul{ width:5000px; margin-left: 0px; float:left; list-style-type:none;}
		.slide_item_inner li { float:left; height:300px; width:50px; z-index:12; opacity:0;}
		.slide_item_inner li.slide_active{ background:rgba(153,153,153,0.8); opacity:1;}
		.slide_item_inner li span{ background:rgba(0,0,0,0.8); width:50px; display:block; color:#FFF; font-size:14px; font-weight:bold; margin-top:10px;}
		.slide_item_inner li span.date{ height:50px; background:#eee; margin-top:0px; color:#000;}
		.slide_item_inner li span.time{ height:80px;}
		.slide_item_inner li span.comment{ height:150px;}
    </style>

需要导入的css,js

<link href="css/flexslider.css" rel="stylesheet" type="text/css"/>

<script src="js/jQuery.1.7.1.min.js"></script>
<script src="js/jquery.flexslider.js"></script>

jQuery代码：

<script>
	$('document').ready(function(){
		
		$('.flexslider').flexslider();
		
		function slide_item_auto(){
			var first_id = $('.slide_item_inner li').attr('id');//获得第一个slide_item 的id
			var second_id = $('.slide_item_inner li').next('li').attr('id');
			$('#'+first_id).addClass('slide_active');
			var item_Width = $('.slide_item_inner li').outerWidth();
			var moveFactor = parseInt($('.slide_item_inner ul').css('margin-left'))+item_Width;
			$('.slide_item_inner ul').animate({'margin-left':moveFactor},'slow',function(){
					$('.slide_item_inner ul li:first').before($('.slide_item_inner ul li:last'));
					$('.slide_item_inner ul').css('margin-left','0px');
			})
			//注意此处是运动程序执行起始点》》	
			$('#'+second_id).removeClass('slide_active');
		}
		//启动图片轮播
		var moveSlide = setInterval(slide_item_auto,7000);
		$('.flex-direction-nav li a.flex-next').click(function(){
			clearInterval(moveSlide);//关闭图片轮播
			slide_item_auto();	
		});
		$('.flex-direction-nav li a.flex-prev').click(function(){
			clearInterval(moveSlide);
			var third_id = $('.slide_item_inner li').next('li').next('li').attr('id');
			var second_id = $('.slide_item_inner li').next('li').attr('id');
			$('#'+third_id).addClass('slide_active');
			var item_Width = $('.slide_item_inner li').outerWidth();
			var moveFactor = parseInt($('.slide_item_inner ul').css('margin-left'))-item_Width;
			$('.slide_item_inner ul').animate({'margin-left':moveFactor},'slow',function(){
					$('.slide_item_inner ul li:last').after($('.slide_item_inner ul li:first'));
					$('.slide_item_inner ul').css('margin-left','0px');
			})
			//注意运动执行起始点》》	
			$('#'+second_id).removeClass('slide_active');
		});
	});
</script>