简单的切换图片

最新推荐文章于 2022-11-22 21:40:16 发布

qidizi

最新推荐文章于 2022-11-22 21:40:16 发布

阅读量572

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qidizi/article/details/8790368

版权

js 专栏收录该内容

89 篇文章 0 订阅

订阅专栏

使用内存预载入,图片只需要载入一次,获取图片的原始大小,保证图片不拉伸;

------------------

<body>
<div style="width:500px; height:500px;border:1px solid red; text-align:center;" id="imgbox"></div>
</body>
<script>

function init_img_box(obj){
if (typeof(obj.imgbox) != 'object'){
    return alert('请设置参数:{imgbox:用于显示的外框html元素对象}');
}

if (!obj.imgs || !obj.imgs.length){
    return alert('请设置参数:{imgs:[{src:"xxx.gif",text:"图片说明", href:"图片href"}]');
}

for (var i=0; i < obj.imgs.length; i++){
    obj.imgs[i].image = new Image();
    obj.imgs[i].image.src = obj.imgs[i].src;
}

if (isNaN(obj.run_sec) || obj.run_sec<1000) obj.run_sec = 1000;

obj.img_i = 0;
obj.imgbox.innerHTML = '<img src="' + obj.imgs[obj.img_i].src + '" title = "' + obj.imgs[obj.img_i].title + '" ' +
                        (obj.imgs[obj.img_i].image.width > obj.imgs[obj.img_i].image.height?'width=100%':'height=100%') + ' />';

var change_img = function (){

    var i = obj.img_i++;

    if (i >= obj.imgs.length){ i = obj.img_i = 0; }
    document.title = (obj.imgs[i].image.width + ' ' + obj.imgs[i].image.height);
    obj.imgbox.innerHTML = '<img src="' + obj.imgs[i].src + '" title = "' + obj.imgs[i].title + '" ' +
                        (obj.imgs[i].image.width > obj.imgs[i].image.height?'width=100%':'height=100%') + ' />';
}

var runer = window.setInterval(
    function (){
      change_img();
    },
    obj.run_sec
);
}

init_img_box(
{imgbox:document.getElementById('imgbox'),
   imgs:[
    {src:'http://www.google.com.hk/images/srpr/nav_logo73.png',title:'goo'},
    {src:'http://img.baidu.com/img/image/ilogob.gif',title:'ddd'},
    {src:'http://www.hahouse.gov.cn/three/huxingpic/20071219161240.jpg',title:'ddd'}
   ]
}
);
</script>

qidizi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的切换图片

使用内存预载入,图片只需要载入一次,获取图片的原始大小,保证图片不拉伸;------------------function init_img_box(obj){ if (typeof(obj.imgbox) != 'object'){ return alert('请设置参数:{imgbox:用于显示的外框html元素对象}'); } if (!obj.imgs || !obj.i
复制链接

扫一扫

专栏目录