saber 酱的抱枕

查看演示demo

这个banner带指示器和左右切换按钮，通屏不通屏皆可使用，有自动播放功能，可以设置是否循环展示。当鼠标放在banner区域时，也可以使用左右方向键来控制banner的切换。兼容IE8及以上浏览器。

这个banner适用于banner横向排列，通过改变left值进行切换的情形。没有做纵向切换的功能。dom结构是banner容器内横向排列着banner列表，我用的是inline-block横向排列。

一个页面上可以有多个banner实例，分别调用js代码就行了。

demo示例如下：

<!-- HTML基础结构 -->
<section class="bannerWrap">
	<ul class="bannerList">
		<li class="banner"></li>
		<li class="banner"></li>
		<li class="banner"></li>
	</ul>
	<ul class="bannerCtr">
		<li class="toleft"></li>
		<li class="pointerWrap">
		    <ul class="pointerList">
		    	<li class="pointer"></li>
		    	<li class="pointer"></li>
		    	<li class="pointer"></li>
		    </ul>
		</li>
		<li class="toright"></li>
	</ul>
</section>
<!-- 引入js -->
<script src="banner.js"></script>
<!-- 配置banner选项 -->
<script>
	banner({
		bannerWrap:".bannerWrap",
		full_screen:true,
		pointer:true,
		arrow:true
	});
</script>

最外层（bannerWrap）同时包含了banner区域（bannerList）和控制区域（bannerCtr）。

控制区域里又包含指示器，多数情况下，指示器不需要滚动切换，那么就不需要pointerWrap和pointerList这两层，直接把pointer和toleft、toright并列就行了。如果需要指示器滚动切换（如demo例3）的情况，才需要pointerWrap和pointerList这两层。

一个页面上如果有多个banner，那么最外层的选择器（bannerWrap）是不能一样的，因为js要按照选择器来选择banner。
最外层的选择器可以改变，但调用js时要写对；
其余部分不能删掉预设的class名，但可以按需要添加新的class名；
标签和内容也都可以按自己需要改，比如不一定非要用ul和li标签；你也可以在bannerList里放任意内容以及嵌套其他标签；
可以对bannerCtr部分按需增删。比如指示器有几个（pointer）需要手动添加；或者不需要箭头的话就去掉箭头。

总之，js只关心它所要用到的选择器（id或class），不在乎用的是什么html标签，样式也无所谓，按自己需要改就行了。

如果要套用这个JavaScript的话，最简单的办法就是复制代码然后在代码上改。html和css部分可以按自己需要改，banner的配置参数按需要设置。参数详情可以在banner.js里的顶部注释里查看。

ps：banner切换时的缓动效果是在css里设置的，不是js管理的：

.banner:{transition: 0.5s;}

如果不需要缓动的话不写这个过渡属性就可以。

IE8不支持css3的transition，所以在IE8里没有缓动效果。

JavaScript制作的带控制按钮的banner