简单的切换图片

原创 2013年04月11日 21:26:38

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

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

<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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

简单的JS图片切换

  • 2012年07月16日 09:48
  • 15KB
  • 下载

简单的banner图片切换焦点图代码

  • 2013年12月13日 22:25
  • 1.36MB
  • 下载

一个简单的图片切换特效

如图所示。 该图片切换特效实现很简单,而且兼容性很好。 html页面如下 css样式 * {margi...

js简单地切换图片

  • 2014年02月24日 18:07
  • 557B
  • 下载

简单可控的JQUERY图片切换

  • 2013年04月14日 15:07
  • 516KB
  • 下载

利用jquery的attr方法一行代码实现的简单的图片切换效果

1.利用jquery的attr方法实现如下的简单的图片切换效果 代码如下: 图片 /* intro */ .intro { width:470px;...

简单的Jquery实现图片切换

  • 2014年09月10日 09:15
  • 208KB
  • 下载

jscode特效简单的图片切换

  • 2012年04月25日 11:19
  • 56KB
  • 下载

(转)【Android游戏开发十六】Android Gesture之【触摸屏手势识别】操作!利用触摸屏手势实现一个简单切换图片的功能!

李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/android-game/337.html ...
  • gxj1680
  • gxj1680
  • 2013年04月07日 16:18
  • 497

简单图片切换

  • 2012年12月24日 12:03
  • 140KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:简单的切换图片
举报原因:
原因补充:

(最多只允许输入30个字)