1.引入Jqthumb.js
Jqthumb插件是专门用来为图片生成缩略图的,
它可以从图片中的任何坐标点开始取指定大小的图片区域作为图片的缩略图。
点击 https://github.com/pakcheong/jqthumb 来下载,并将其应用到项目中(假设在当前项目中,jqthumb.js放置在scripts文件夹中):
2.在图片加载(onload)的时候调用DrawImage()函数来生成缩略图
DrawImage()函数正是基于jqthumb.js库的,注意该函数一定要写在轮换插件前,因为我们必须在图片加载前生成缩略图
DrawImage()函数代码如下:
- <script>
- function DrawImage(hotimg)
- {
- $(hotimg).jqthumb({
- classname : 'jqthumb',
- width : '100%',//宽度
- height : '300px',//高度
- position : { y: '50%', x: '50%'},//从图片的中间开始产生缩略图
- zoom : '1',//缩放比例
- method : 'auto',//提交方法,用于不同的浏览器环境,默认为‘auto’
- });
- }
- </script>