之前没做过滚动栏，但既然这么常用，肯定有现成的代码或者插件，果不其然，百度一下，flexslider插件出来了。

flexslider是一款免费的，轻量级的jQuery插件，这两点都很关键，免费便于推广快，轻量级便于提高网页加载速率，最后一点，使用简单。代码如下：

<link rel=”stylesheet” href=”flexslider.css” type=”text/css” media=”screen” />
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script>
<script src=”jquery.flexslider-min.js”></script>

首先加载flexslider插件的CSS样式，加载jQuery代码，加载flexslider插件的JS代码。

然后用个class=“flexslider”的div，装着个class=“slider”的ul，li里放一些需要滚动播放的图片。代码如下：

<div class=“flexslider”>
<ul class=“slider”>
<li>
<img src=”demo-stuff/inacup_samoa.jpg” />
<p>Captions and cupcakes. Winning combination.</p>
</li>
<li>
<a href=”http://flex.madebymufffin.com”><img src=”demo-stuff/inacup_pumpkin.jpg” /></a>
<p>This image is wrapped in a link!</p>
</li>
<li>
<img src=”demo-stuff/inacup_donut.jpg” />
</li>
<li>
<img src=”demo-stuff/inacup_vanilla.jpg” />
</li>
</ul>
</div>

最后，运行JS启动滚动栏

<script type=”text/javascript”>
$(window).load(function() {
$(“.flexslider”).flexslider({
animation: “slide”,
controlNav: true,
directionNav: false,
slideshowSpeed: 6500,
animationSpeed: 350
});
});
</script>

设置flexslider函数的参数，达到自己想要的效果，咔咔咔，制作滚动栏完毕。