网站要加个图片切换效果,找了好久没找到合适的,有些能切换代码一大堆,而且分辨率只能在特定的环境使用。没法只能自己写了,有同样需求的可以拿去用,图片大小随窗口大小变化而变化,不变形。下面附带源码与使用方法。
-
CSS部分
点击(此处)折叠或打开
-
/*banner*/
- #banner img{height:auto;max-width:100%;width:auto;}
- .banner{overflow:hidden;position:relative;width:1440px;}
- .banner ul{position:absolute;width:9999px;}
- .banner li{float:left;padding:0px;margin:0px;}
- .banner li img{padding:0px;margin:0px;}
-
HTML部分
点击(此处)折叠或打开
-
<!--banner 开始 -->
- <div class="banner">
- <ul>
- <li><img class="img" src="img/banner.jpg" /></li>
- <li><img class="img" src="img/banner.jpg" /></li>
- <li><img class="img" src="img/banner.jpg" /></li>
- </ul>
- </div>
- <!--banner 结束 -->
-
插件切换实现代码
点击(此处)折叠或打开
-
(function ($) {
- $.extend({
- switchImg:function(o){
- var config={
- i:1,
- cWidth:document.body.clientWidth,
- div:o.div?$(o.div):$("div"),
- ul:o.div?$(o.div+">ul"):$("div>ul"),
- img:o.div?$(o.div+">ul>li>img"):$("div>ul>li>img"),
- max:o.max?o.max:2,
- interval:o && o.interval || 3500,
- height:o && o.height || 150,
- },
- silde=function(){//图片轮播函数
- config.ul.i = config.i; //当前第几张
- config.ul.liWidth = document.body.clientWidth; //LI宽度
- config.ul.animate({left: -(config.ul.i * config.ul.liWidth) + "px"},1000);
- ++config.i;
- if (config.ul.i == config.max) {
- config.i = 0;
- }
- //console.log(config.ul.i);
- },
- viewLoad=function(){//页面加载,设置图片大小
- config.ul.css('left', '0px');
- config.cWidth =document.body.clientWidth;
- config.div.width(config.cWidth);
- config.div.height(document.documentElement.clientHeight-config.height);
- //等比例设置图片大小
- config.img.each(function(m){
- AutoResizeImage(config.cWidth, 0, $(this)[0]);
- });
- },
- AutoResizeImage=function (maxWidth, maxHeight, objImg) {
- var img = new Image();
- img.src = objImg.src;
- var hRatio;
- var wRatio;
- var Ratio = 1;
- var w = img.width;
- var h = img.height;
- wRatio = maxWidth / w;
- hRatio = maxHeight / h;
- if (maxWidth == 0 && maxHeight == 0) {
- Ratio = 1;
- } else if (maxWidth == 0) { //
- if (hRatio < 1) Ratio = hRatio;
- } else if (maxHeight == 0) {
- if (wRatio < 1) Ratio = wRatio;
- } else if (wRatio < 1 || hRatio < 1) {
- Ratio = (wRatio <= hRatio ? wRatio: hRatio);
- }
- if (Ratio < 1) {
- w = w * Ratio;
- h = h * Ratio;
- }
- objImg.height = h;
- objImg.width = w;
- },
- s= setInterval(silde,config.interval);
- new viewLoad;
- //new imgLoad;//加载时设置图片大小
- $(window).resize(function() {//改变窗口时重新计算DIV位置,与图片大小
- new viewLoad;
- });
- }
- });
- }(jQuery))
-
调用实例
点击(此处)折叠或打开
-
$(function() {
- $.switchImg({div:'.banner'});
- })
-
参数说明
点击(此处)折叠或打开
-
i:1, //第几张开始切换
- cWidth:document.body.clientWidth,
- div:o.div?$(o.div):$("div"), //UL父级第一个DIV
- ul:o.div?$(o.div+">ul"):$("div>ul"),//DIV下的UL
- img:o.div?$(o.div+">ul>li>img"):$("div>ul>li>img"),//div切换的图片
- max:o.max?o.max:2,//总计张数,比实际张数少一
- interval:o && o.interval || 3500,//切换间隔
- height:o && o.height || 150,//除图片外屏幕其他高度,看截图的空色框高度,就是图片其他高度
-
修改可以使用
点击(此处)折叠或打开
-
$(function() {
- $.switchImg({div:'.banner',max:5,interval:5000});
- });
- //五张图片,每隔5秒切换一次
点击(此处)折叠或打开
-
$(function() {
- $.switchImg({div:'.banner',max:5,interval:5000});
- });
- //五张图片,每隔5秒切换一次
-
HTML结构规定
点击(此处)折叠或打开
-
DIV
- UL
- li
- img
-
截图
-
缩小窗口图片并没变形
源码下载:HTML.zip
原创,转载请注明出处