轮播图[左右旋转滚动],可配置是否自动轮播/半透明/居中放大等等,简单实用

来源:互联网 发布:决战武林进阶数据弩炮 编辑:程序博客网 时间:2024/06/07 01:34

最近的一个项目,需要做轮播循环左右滚动的轮播图,之前也做了很多类似效果,但是没有好好集成归纳一下,每次都要重新写一次,很麻烦。

这次一了百了干脆自己写了一个,以后都可以用。

废话不说。

简单效果如下:


说明:简单效果是,1.提供左右按钮、;2.奇数张图片,居中图片放大,不透明,其他图片略小,而已有一定的透明;3.偶数张图片不提供居中放大的功能。

注意:这里面的左右按钮、图片透明度、图片大小等等都是可以根据自己的需要配置的。

具体功能请看下面参数介绍:

<!--  //**详细参数**//_width: 300, //默认宽度 _height: 180, //默认高度 expand: true, //是否居中放大 Cwidth: 320, //居中图片大小设置 Cheight: 210, move: '', //启用轮播,值(left/right)为方向,空为不自动轮播 time: 3000, //轮换时间 speed: 'normal', //动画速度 model: true, //是否有遮罩层 opacity: 0.5, //遮罩层透明度 btn: true, //是否启用上一页下一页按钮 next: 'next', //下一个按钮文字  prev: 'prev',  //上一个按钮文字 page: false, //是否启用导航图标 pageNum: true, //轮播图标是否显示数字 pageCenter: true, //轮播图标是否居中 picBtn: true //是否启用点击图片轮换居中 --><script>$('#MdsSlide').MdsZoomIn({// 参数配置});</script>


下载地址:循环居中放大zoomIn

取件码:y2ik



                                             
0 0
原创粉丝点击