效果:
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>