第39款插件:jquery.flexslider.js带左右箭头且带按钮可滚动的图片插件

图文混排

  • FlexSlider!

    它是一款多功能图片切换效果的插件!

  • jquery flexslider滑块幻灯片插件图片和文字结合焦点图片切换

  • FlexSlider

    它是一款基于的jQuery内容滚动插件。它能让你轻松的创建内容滚动的效果,具有非常高的可定制性。它是将UL列表转换成内容滚动的列表,可以自动播放,或者使用导航按钮和键盘来控制。

  • FlexSlider

    它是一个免费的响应jQuery滑块工具包。支持所有主要浏览器自定义导航选项和触摸滑动支架。

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" />