3种jQuery图片无缝滑动轮播特效

3种jQuery图片无缝滑动轮播特效

添加时间:2021-03-09 16:35:53
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:图片轮播
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

3种jQuery图片无缝滑动轮播特效,分别是淡出淡入、上下滑动和左右滑动轮播效果。
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>
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:3种jQuery图片无缝滑动轮播特效

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.089317s