JavaScript
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(function() {
$(".flexslider").flexslider({
slideshowSpeed: 4000, //展示时间间隔ms
animationSpeed: 400, //滚动时间ms
touch: true //是否支持触屏滑动
});
});
</script>
HTML
<div class="flexslider" style="width:800px;margin-left:110px;">
<ul class="slides">
<li>
<img src="images/s1.jpg" alt="" />
<div style="position:absolute; top:70px; right:200px;">
<h4>FlexSlider!</h4>
<p>它是一款多功能图片切换效果的插件!</p>
</div>
</li>
<li>
<img src="images/s2.jpg" alt="" />
<div style="position:absolute; bottom:0; right:0; width:100%; height:42px; background:#000; text-indent:20px; color:#fff">
<h4>jquery flexslider滑块幻灯片插件图片和文字结合焦点图片切换</h4>
</div>
</li>
<li>
<img src="images/s3.jpg" alt="" />
<div style="position:absolute; top:70px; right:65px; width:420px; padding:10px; background:#333; opacity:.8; color:#fff">
<h4>FlexSlider</h4>
<p>它是一款基于的jQuery内容滚动插件。它能让你轻松的创建内容滚动的效果,具有非常高的可定制性。它是将UL列表转换成内容滚动的列表,可以自动播放,或者使用导航按钮和键盘来控制。</p>
</div>
</li>
<li>
<img src="images/s4.jpg" alt="" />
<div style="position:absolute; top:20px; left:200px; width:520px;">
<h4>FlexSlider</h4>
<p>它是一个免费的响应jQuery滑块工具包。支持所有主要浏览器自定义导航选项和触摸滑动支架。</p>
</div>
</li>
</ul>
</div>
CSS
<link rel="stylesheet" type="text/css" href="css/flexslider.css" />