简单的切换图片

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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qidizi/article/details/8790368

js简单实现图片切换效果

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

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

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

利用js实现简单的图片切换(上下张切换)

利用js实现简单的图片切换(上下张切换) 简单的图片切换 var crr=1; function changePic(){ ...
  • miachen520
  • miachen520
  • 2016-07-07 09:11:53
  • 1653

Js实现类似图片相册左右切换效果

Js版淘宝图片切换,类似相册播放效果 * { margin: 0; padding: 0; ...
  • gudanyehai
  • gudanyehai
  • 2010-12-29 17:35:00
  • 951

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

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

js实现简单的图片切换

放在 function picShow(nwhich) { if(!document.getElementById) return; if(nwhich==2) { docum...
  • zurich1979
  • zurich1979
  • 2014-09-11 14:27:55
  • 1599

简单的js图片切换,简单的js图片切换

  • 2010年02月01日 18:39
  • 237KB
  • 下载

html图片动态切换

  • 2015年06月25日 14:19
  • 9KB
  • 下载

点击按钮实现图片的切换

这是一个简单的小的DEMO , 关于点击按钮用于实现图片的切换, 重要的就是里面的关于逻辑的处理, 在以后图片轮播的技术上关于逻辑的处理和这个类似java代码import android.app.Ac...
  • han478270575
  • han478270575
  • 2015-12-16 19:27:11
  • 417
收藏助手
不良信息举报
您举报文章:简单的切换图片
举报原因:
原因补充:

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