JQuery插件——backstretch

如果想要在网站的门户或是某个页面加入一个图片轮播的功能，Jquery的backstretch插件应该是个不错的选择，该插件使用配置都相当简单。

第一步要在index.html中引入jquery.js和jquery.backstretch.js；

<script src="jquery.js"></script> 
<script src="jquery.backstretch.js"></script>

第二步获取需要添加轮播组件div的id (class也是可以哦)。

<div id="myId"></div>

第三步在对应的js控制代码中，获取该dom元素，将想要展示的图片放入backstretch中，并对duration（持续显示时间ms）和fade（渐变间隔时间ms）进行配置。

$('#Id').backstretch([ 
"../assets/img/login/img1.jpg", 
"../assets/img/login/img2.jpg", 
"../assets/img/login/img3.jpg", 
"../assets/img/login/img4.jpg", 
"../assets/img/login/img5.jpg", 
], { 
fade: 1000, 
duration: 8000 
} 
);

现在刷新页面就可以看到了图片轮播的效果了。