jQuery自适应滑块轮播图插件zpSlide

所属分类:媒体-幻灯片和轮播图

 23135  218  查看评论 (9)
分享到微信朋友圈
X
jQuery自适应滑块轮播图插件zpSlide ie兼容10

更新时间:2018/1/16 下午6:13:23

更新说明:增加了自动轮播功能


更新时间:2017-9-19 18:12:39

更新说明:修改轮播图最外层盒子()的宽度在非全屏下样式错乱的问题。


使用方法

引入JQuery框架,以及zpSlide:

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/zpSlide.js" type="text/javascript" charset="utf-8"></script>

html结构:

<div class="zp-slide">
    <ul>
        <li>
        	<img src="..." />
        </li>
        <li>
        	<img src="..." />
        </li>
    </ul>
    <a href="javascript:void(0)" class="zp-slide-left"><img src="img/zp-left.png"></a>
    <a href="javascript:void(0)" class="zp-slide-right"><img src="img/zp-right.png"></a>
</div>

css样式:

img{
	max-width: 100%;
}
.zp-slide{
	overflow: hidden;
	position: relative;
}
.zp-slide>ul{
	list-style: none;
    padding: 0;
    margin: 0;
    width: 1600%;
    transition: all 0.3s;
    transform: translate3d(0px, 0px, 0px);
}
.zp-slide>ul>li{
	float: left;
}
[class^=zp-slide-]{
	display: block;
	position: absolute;
	width: 30px;
	height: 30px;
	top: 50%;
	margin-top: -15px;
	left: 30px;
	opacity: 0.5;
}
[class^=zp-slide-]:hover{
	opacity: 1;
}
.zp-slide-right{
	left: auto;
	right: 30px;
}

js代码:

<script type="text/javascript">
	$(function(){
		$('.zp-slide').zpSlide({
			//'original':1, //414px小屏幕,默认显示1个
			'xs':1,       //640px小屏幕,默认显示2个,当前自定义显示1个
			'sm':2,       //768px中屏幕,默认显示3个,当前自定义显示2个
			'md':3,       //1024px中屏幕,默认显示4个,当前自定义显示3个
			'lg':3        //1280px大屏幕,默认显示5个,当前自定义显示3个
		});
	})
</script>
相关插件-幻灯片和轮播图

jQuery左右全屏弹性切换焦点图特效

jQuery左右全屏弹性切换焦点图特效
  幻灯片和轮播图
 23579  314

jquery超炫3D自动旋转点击图片轮播图片切换焦点图

jquery超炫3D自动旋转点击图片轮播图片切换焦点图
  幻灯片和轮播图
 73186  504

好玩的蹦床效果轮播图

一个有趣的内容导航效果,使用可拖动的弹性堆栈和Snap.svg动画像蹦床一样的背景形状。
  幻灯片和轮播图
 18279  279

jQuery炫酷的相册幻灯

jQuery炫酷的相册幻灯
  幻灯片和轮播图
 29182  357

讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Tom Lee 0
    2017/12/1 9:29:52
    天边那颗星 0
    2017/9/26 17:29:02
    邓生 0
    2017/8/29 19:47:01

    很不错,很实用

    回复
    client 0
    2017/8/24 15:40:57
    aerolith 0
    2017/8/17 16:03:39
    鱼丸。 0
    2017/8/15 17:21:58
    0.0 0
    2017/8/11 15:00:28
    樱桃 0
    2017/7/27 17:09:30

    好漂亮

        client0
        2017/8/24 15:42:33

        怎么下载

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复