现在的位置: 首页 > 综合 > 正文

Jquery全屏图片自动切换插件,支持窗口变化图片大小等比例变化

2017年02月16日 ⁄ 综合 ⁄ 共 4145字 ⁄ 字号 评论关闭
网站要加个图片切换效果,找了好久没找到合适的,有些能切换代码一大堆,而且分辨率只能在特定的环境使用。没法只能自己写了,有同样需求的可以拿去用,图片大小随窗口大小变化而变化,不变形。下面附带源码与使用方法。

  • CSS部分

点击(此处)折叠或打开

  1. /*banner*/
  2. #banner img{height:auto;max-width:100%;width:auto;}
  3. .banner{overflow:hidden;position:relative;width:1440px;}
  4. .banner ul{position:absolute;width:9999px;}
  5. .banner li{float:left;padding:0px;margin:0px;}
  6. .banner li img{padding:0px;margin:0px;}

  • HTML部分

点击(此处)折叠或打开

  1. <!--banner 开始 -->
  2. <div class="banner">
  3.     <ul>
  4.         <li><img class="img" src="img/banner.jpg" /></li>
  5.         <li><img class="img" src="img/banner.jpg" /></li>
  6.         <li><img class="img" src="img/banner.jpg" /></li>
  7.     </ul>
  8. </div>
  9. <!--banner 结束 -->

  • 插件切换实现代码

点击(此处)折叠或打开

  1. (function ($) {
  2.     $.extend({
  3.         switchImg:function(o){        
  4.             var config={
  5.             i:1,
  6.             cWidth:document.body.clientWidth,
  7.             div:o.div?$(o.div):$("div"),
  8.             ul:o.div?$(o.div+">ul"):$("div>ul"),
  9.             img:o.div?$(o.div+">ul>li>img"):$("div>ul>li>img"),
  10.             max:o.max?o.max:2,
  11.             interval:o && o.interval || 3500,
  12.             height:o && o.height || 150,
  13.             },
  14.             silde=function(){//图片轮播函数
  15.                 config.ul.i = config.i; //当前第几张
  16.                 config.ul.liWidth = document.body.clientWidth; //LI宽度
  17.                 config.ul.animate({left: -(config.ul.i * config.ul.liWidth) + "px"},1000);
  18.                 ++config.i;
  19.                 if (config.ul.i == config.max) {
  20.                     config.i = 0;
  21.                 }
  22.                 //console.log(config.ul.i);            
  23.             },
  24.             viewLoad=function(){//页面加载,设置图片大小
  25.                 config.ul.css('left', '0px');
  26.                 config.cWidth =document.body.clientWidth;
  27.                 config.div.width(config.cWidth);    
  28.                 config.div.height(document.documentElement.clientHeight-config.height);
  29.                 //等比例设置图片大小
  30.                 config.img.each(function(m){
  31.                     AutoResizeImage(config.cWidth, 0, $(this)[0]);                
  32.                 });
  33.             },        
  34.             AutoResizeImage=function (maxWidth, maxHeight, objImg) {
  35.                                 var img = new Image();
  36.                                 img.src = objImg.src;
  37.                                 var hRatio;
  38.                                 var wRatio;
  39.                                 var Ratio = 1;
  40.                                 var w = img.width;
  41.                                 var h = img.height;
  42.                                 wRatio = maxWidth / w;
  43.                                 hRatio = maxHeight / h;
  44.                                 if (maxWidth == 0 && maxHeight == 0) {
  45.                                     Ratio = 1;
  46.                                 } else if (maxWidth == 0) { //
  47.                                     if (hRatio < 1) Ratio = hRatio;
  48.                                 } else if (maxHeight == 0) {
  49.                                     if (wRatio < 1) Ratio = wRatio;
  50.                                 } else if (wRatio < 1 || hRatio < 1) {
  51.                                     Ratio = (wRatio <= hRatio ? wRatio: hRatio);
  52.                                 }
  53.                                 if (Ratio < 1) {
  54.                                     w = w * Ratio;
  55.                                     h = h * Ratio;
  56.                                 }
  57.                                 objImg.height = h;
  58.                                 objImg.width = w;
  59.             },
  60.             s= setInterval(silde,config.interval);
  61.             new viewLoad;
  62.             //new imgLoad;//加载时设置图片大小
  63.             $(window).resize(function() {//改变窗口时重新计算DIV位置,与图片大小          
  64.                 new viewLoad;
  65.             });
  66.         }    
  67.     });
  68. }(jQuery))

  • 调用实例

点击(此处)折叠或打开

  1. $(function() {
  2.     $.switchImg({div:'.banner'});
  3. })

  • 参数说明

点击(此处)折叠或打开

  1. i:1, //第几张开始切换
  2. cWidth:document.body.clientWidth,
  3. div:o.div?$(o.div):$("div"), //UL父级第一个DIV
  4. ul:o.div?$(o.div+">ul"):$("div>ul"),//DIV下的UL
  5. img:o.div?$(o.div+">ul>li>img"):$("div>ul>li>img"),//div切换的图片
  6. max:o.max?o.max:2,//总计张数,比实际张数少一
  7. interval:o && o.interval || 3500,//切换间隔
  8. height:o && o.height || 150,//除图片外屏幕其他高度,看截图的空色框高度,就是图片其他高度

  • 修改可以使用

点击(此处)折叠或打开

  1. $(function() {
  2.     $.switchImg({div:'.banner',max:5,interval:5000});
  3. });
  4. //五张图片,每隔5秒切换一次

点击(此处)折叠或打开

  1. $(function() {
  2.     $.switchImg({div:'.banner',max:5,interval:5000});
  3. });
  4. //五张图片,每隔5秒切换一次
  • HTML结构规定

点击(此处)折叠或打开

  1. DIV
  2.      UL
  3.          li
  4.              img

  • 截图

  • 缩小窗口图片并没变形

源码下载:HTML.zip

原创,转载请注明出处

抱歉!评论已关闭.