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

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

 24753  240  查看评论 (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>
相关插件-幻灯片和轮播图

基于roundabout.js的3d倾斜轮播

jQuery.roundabout.js制作CSS3图片倾斜层叠切换效果代码
  幻灯片和轮播图
 34171  485

购物网站特色栏目jquery插件

可以随意设置栏目信息,顶端可以使用四格或者更多图片来滑动显示,美观大方。
  幻灯片和轮播图
 26068  316

魔兽世界轮播图

很简单的一款小插件 希望大家喜欢
  幻灯片和轮播图
 20806  239

jquery左右全屏渐变切换焦点图特效

全屏渐变切换焦点图特效
  幻灯片和轮播图
 25769  286

讨论这个项目(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

        怎么下载

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