内容及banner轮播（多余条数隐藏轮播显示）

说明:作为一个Java后端程序员，有时候也需要自己去写些前端代码，所以将工作中用到的一些小知识做记录分享。

* ①知识点介绍：

设计作图时，页面可视宽度大部分是固定的,横向只能显示固定的几条信息，当我们后台返回信息条数大于可视固定信息条数时，
我们有两种方法处理，一、只截取页面可视条数个数信息，二、初始显示可视条数其余条数采用Css隐藏，采用轮播的方式显示其余条数信息；具体运用视业务需求而定。
第一种方法很简单，本文演示的是第二种方法。

* ②静态效果图：

上图中我只显示了三条数据，其余数据采用Css隐藏起来，如果要查看别条数据，可以点击左右箭头，会执行轮播显示；

当然也可以采用自动轮播，具体设置接下来会讲到；

* ③轮播效果Js代码：

<script type="text/javascript">
			function DY_scroll(wraper, prev, next, img, speed, or) {
				var wraper = $(wraper);
				var prev = $(prev);
				var next = $(next);
				var img = $(img).find('ul');
				var w = img.find('li').outerWidth(true);
				var s = speed;
				next.click(function() {
					img.animate({
						'margin-left': -w
					}, function() {
						img.find('li').eq(0).appendTo(img);
						img.css({
							'margin-left': 0
						});
					});
				});
				prev.click(function() {
					img.find('li:last').prependTo(img);
					img.css({
						'margin-left': -w
					});
					img.animate({
						'margin-left': 0
					});
				});
				if(or == true) {
					ad = setInterval(function() {
						next.click();
					}, s * 1000);
					wraper.hover(function() {
						clearInterval(ad);
					}, function() {
						ad = setInterval(function() {
							next.click();
						}, s * 1000);
					});

				}
			}
        // true为自动播放，不加此参数或false就默认不自动
	DY_scroll('#img-scroll', '#prev', '#next', '#img-list', 3, false); 
		</script>

该方法调用执行的轮播效果：

DY_scroll('#img-scroll', '#prev', '#next', '#img-list', 3, false); //最后一个参数为 true为自动播放，不加此参数或false就默认不自动；

* ④完整代码下载：

具体代码贴出来会让文章过长就不一 一贴出，如果需要完成代码可以点击下列链接下载：

下载链接：https://pan.baidu.com/s/1temtW9j9OPlw_EBQax58wA

* ⑤banner轮播：

banner轮播我采用的是SuperSlide，只需将图片替换成自己的banner图,再改动Css以适用自己网站风格即可，简单好用。

SuperSlide地址：http://www.superslide2.com

demo地址：http://www.superslide2.com/SuperSlide.2.1.2/demo.html