842   CSS HTML jQuery JS

 

之前没做过滚动栏,但既然这么常用,肯定有现成的代码或者插件,果不其然,百度一下,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函数的参数,达到自己想要的效果,咔咔咔,制作滚动栏完毕。

 




Leave a Reply

Your email address will not be published. Required fields are marked *