增强版内容轮播器（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 的idvar 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>