简单的切换图片

原创 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简易的图片自动轮播

对于图片轮播,主要
  • u010793590
  • u010793590
  • 2014年06月06日 14:00
  • 1076

js实现简单的图片切换

放在 function picShow(nwhich) { if(!document.getElementById) return; if(nwhich==2) { docum...
  • zurich1979
  • zurich1979
  • 2014年09月11日 14:27
  • 1571

jquery实现图片左右切换的方法

jquery实现图片左右切换的方法 投稿:shichen2014 字体:[增加 减小] 类型:转载 这篇文章主要介绍了jquery实现图片左右切换的方法,设计jQuery操作页面元...
  • evilcry2012
  • evilcry2012
  • 2015年05月20日 14:18
  • 663

图片的简单切换

关于界面控制,完全Java代码控制UI繁琐,不利于解耦,完全XML的话简单方便但是不灵活,有时候XML和代码共同控制UI界面,把变化小行为固定的放在XML中,变化多,行为复杂的则有java代码来负责 ...
  • qq_31443653
  • qq_31443653
  • 2016年05月14日 15:57
  • 183

简单是选项卡切换效果~

效果图:代码:
  • kakaxiD
  • kakaxiD
  • 2016年05月09日 14:17
  • 1227

js的判断以及图片的点击切换效果

js的判断知识 1、js中判断的几种类型     1) if( 判断条件  ){                条件成立时,执行里面的语句                条件不成立时,不执行 ...
  • TC_16_zl
  • TC_16_zl
  • 2017年06月13日 11:59
  • 350

js简单实现图片切换效果

js简单实现图片切换效果 body{ margin: 0; padding: 0; } .adbody{ width:100%; h...
  • liu625524324
  • liu625524324
  • 2016年01月20日 13:27
  • 1898

简单的图片、文字轮播,及切换动画

图片轮播使用的容器是ViewPager,文字轮播使用的是TextSwitcher。 图片轮播的主要思路:利用Timer和TimerTask构建定时任务;监听ViewPager的滑动,根据滑动百分...
  • zpf0943084056
  • zpf0943084056
  • 2017年01月05日 15:56
  • 218

仅用css+HTML实现图片切换效果

备注:最好在firefox或chrome运行,在IE效果没出现  -。- 效果图: -----images.html----- How to Create An Imag...
  • zjut_acm
  • zjut_acm
  • 2015年04月08日 19:55
  • 10437

使用CSS3制作简单的图形运动变换

animation:n. 动画,keyframes: n. 关键帧。在CSS3中,要运用到animation动画的话,需要联合运用好keyframes和animation。注意:所有浏览器都需要加前缀...
  • a214161398a
  • a214161398a
  • 2015年10月11日 20:42
  • 428
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:简单的切换图片
举报原因:
原因补充:

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