3种jQuery图片无缝滑动轮播特效
时间:2019-11-15 10:28:24 来源:网络收集 作者:不详 点击:次
源码授权:
免费特效
运行环境:
jQuery
源码大小:
58 KB
普通会员
3种jQuery图片无缝滑动轮播特效,分别是淡出淡入、上下滑动和左右滑动轮播效果。![]() js代码 <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script src="pike.min.js"></script> <script> var myPi = new Pike(".pi", { type: 1, // 轮播的类型(1渐隐) automatic: true, //是否自动轮播 (默认false) autoplay: 2000, //自动轮播毫秒 (默认3000) hover: true, //鼠标悬停轮播 (默认false) arrowColor: "yellow", //箭头颜色 (默认绿色) arrowBackgroundType: 2, //箭头背景类型 (1: 方形, 2:圆形) arrowBackground: 1, //箭头背景色 (1:白色,2:黑色, 默认:无颜色) arrowTransparent: 0.2, //箭头背景透明度 (默认: 0.5) spotColor: "white",//圆点颜色 (默认: 白色) spotType: 1, //圆点的形状 (默认: 圆形, 1:圆形, 2.矩形) spotSelectColor: "red", //圆点选中颜色 (默认绿色) spotTransparent: 0.8, //圆点透明度 (默认0.8) mousewheel: true, //是否开启鼠标滚动轮播(默认false) drag: false, //是否开启鼠标拖动 (默认为: true, 如不需要拖动设置false即可) loop: true, //是否循环轮播 (默认为: false) }); var myPi1 = new Pike(".pi1", { // automatic: true, //是否自动轮播 (默认false) type: 2, // 轮播的类型(2左右滑动) slide: 500, //轮播滑动的速度(默认800) autoplay: 2000, //自动轮播毫秒 (默认3000) hover: true, //鼠标悬停轮播 (默认false) arrowList: { //自定义箭头图片 left: "img/left.png", right: "img/right.png", width: 70, //如果不设置宽高,则按照图片默认宽高显示 height: 70, }, spotList: { //自定义圆点 width: 12, //宽 height: 12, //高 borderRadius: 50, //圆角边框 opacity: 0.6,//透明度 color: "white",//颜色 select: { //自定义圆点选中样式 width: 18, //宽 borderRadius: 50, //圆角边框 height: 18, //高 color: "blue", backgroundImg: "img/haha.png" } }, mousewheel: true, //是否开启鼠标滚动轮播(默认false) // loop: true, //是否循环轮播 (默认为: false) spotDirection: "bottom", //圆点的方向(left:左, right:右, top:上, bottom:下, 默认:bottom) }); var myPi2 = new Pike(".pi2", { type: 3, // 轮播的类型(3上下滑动) slide: 500, //轮播滑动的速度(默认800) // automatic: true, //是否自动轮播 (默认false) autoplay: 2000, //自动轮播毫秒 (默认3000) hover: true, //鼠标悬停轮播 (默认false) arrowColor: "white", //箭头颜色 (默认绿色) arrowBackground: 2, //箭头背景色 (1:白色,2:黑色, 默认:无颜色) spotList: { //自定义圆点 width: 20, //宽 height: 20, //高 borderRadius: 50, //圆角边框 opacity: 0.8,//透明度 color: "white",//颜色 backgroundImg: "img/red.png", select: { //自定义圆点选中样式 width: 20, //宽 borderRadius: 50, //圆角边框 height: 20, //高 color: "red", backgroundImg: "img/blue.png", //图片 } }, spotDirection: "right", //圆点的方向(left:左, right:右, top:上, bottom:下, 默认:bottom) mousewheel: true, //是否开启鼠标滚动轮播(默认false) // loop: true, //是否循环轮播 (默认为: false) }); </script> |