修改SlidesJs 3.0使其支持自适应更换图片

SlidesJs 3.0是一个支持自适应滑动的jQuery插件,支持移动设备触摸滑动和CSS过渡效果,使用也简单,支持IE7及以上的高级浏览器。

该幻灯片插件除了上面的特色外,还支持循环、自动播放、图片预加载、自动生成分页等常规的滚动插件设置。

插件使用方法:

<!doctype html>
<head>
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
</style>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>

<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 528
});
});
</script>
</head>
<body>
<div id="slides">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
</div>
</body>

本文要讲的是如何优化在移动设备的使用

由于使用这个插件在移动设备时加载的图片跟PC上的图片一样大,图片会压缩变形,并且图片太大明显浪费用户的流量,影响网页的加载。

同时也有可能移动设备上的图片跟PC上的图片大小不是同一个比例,而该插件是根据设定的长和宽的比例来缩放,不符合我们的需求。

本人修改了这个插件的一些设置,并加入了一些参数。

参数默认值描述
resizeImgfalse自适应图片是否有效:默认为否,若为真,则移动端和PC端需加不同图片
mSize640窗口宽度小于这个值的使用移动端图片
mWidth640移动端的图片宽度
mHeight340移动端的图片高度
pcWidth1170PC端的图片高度
pcHeight340PC端的图片高度

如果是不需要考虑移动端与PC端使用不同的图片,则插件的使用情况跟原来的插件一样。

如果需要使用移动端与PC端不同图片,则需要加以下代码,图片的图片和高度根据你的情况更改。

<script>
$(function() {
$('#slides').slidesjs({
width: 940,
height: 528,
difImg: true,//必须,其他根据图片尺寸情况更改
mSize: 610,
mWidth: 611,
mHeight: 340,
pcWidth : 1134,
pcHeight : 340
});
});
</script>

HTML代码需要在图片上加上data-Mobile和data-pc的图片地址,默认可以填mobile的地址。

<div id="slides">
<img src="img/b1.jpg" alt="" data-mobile="img/b1.jpg" data-pc="img/banner1.jpg">
<img src="img/b2.jpg" alt="" data-mobile="img/b2.jpg" data-pc="img/banner2.jpg">
<img src="img/b3.jpg" alt="" data-mobile="img/b3.jpg" data-pc="img/banner3.jpg">
</div>

我已经将插件fork并更改上传到我的github了,你可以到这里查看我的代码和演示:

https://github.com/kujian/Slides/tree/SlidesJS-3

如果这个插件对你有用,欢迎Star和Fork,你的支持是我们继续努力的动力。

演示 缩放窗口大小到600以下会发现图片已经变了

 

原创文章:修改SlidesJs 3.0使其支持自适应更换图片 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/slidesjs.html)

发表评论

请登录后发表评论:

“修改SlidesJs 3.0使其支持自适应更换图片”有3个评论

  1. 淡忘~浅思

    嘿嘿 觉得贵站不错 已经将贵站加入 http://www.ido321.com/daohang/ Web开发类 如有错误请指正

    登录回复
    • 前端博客

      多谢支持,如果可以放到第一页就更好了,需要进入分类详情才能看,估计很多人都发现不了。

      登录回复
  2. 前端博客

    优化图片在移动客户端上的大小。

    登录回复