js-自制轮播插件!
刚接触轮播的时候,感觉这种东西好高端,后来学习了jquery后,发现原来挺简单的,而且实现轮播也有很多形式,我用jquery自制了一个轮播插件,其实我这个说是插件,好像其实就是一个高度抽象的函数而已。慢慢来!以后再整高端点的!
首先原理是有个outerbox的容器,就是轮播的整体框架了,大小最好与图片的大小一致;然后outerbox内部嵌套一个innerbox,innerbox是个很长的容器,里面放着图片,然后通过移动innerbox的位置实现outerbox里显示不同的图片,原理非常简单!
这个插件只需要设置outerbox的宽度和高度就可以正常使用,还可以通过传递参数修改轮播间隔和颜色风格,整体风格类似于亚马逊首页的轮播图。
不过通过js在outerbox里新建了好多个元素,不知道对性能影响大不大或者是否有更大的不良后果,通过以后的学习再来解答这个问题吧。
效果图:
代码在我的github:https://github.com/zhangcuiZC/slideshowzc