图片自动切换(没有过渡效果)

原创 2016年06月02日 12:49:49
 

//修改图片的宽度、高度,注意要和下面的一样,修改显示位置
<style type="text/css">
#img1 {position:absolute; width:140px; height:105px; left:220px; top:125px; z-index:1; visibility:hidden;}
#img2 {position:absolute; width:140px; height:105px; left:220px; top:125px; z-index:2}
</style>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var ie5=(document.getElementByIdx && document.all);
var ns6=(document.getElementByIdx && !document.all);

nPlus = 5   //the % of fading for each step
speed = 50  //速度

// You don't have to edit below this line
nOpac = 100
function FadeImg(){
    if(document.getElementByIdx){
        document.getElementByIdx('img1').style.visibility="visible";
        imgs = document.getElementByIdx('img2');
 opacity = nOpac+nPlus;
 nOpac = opacity;
 setTimeout('FadeImg()',speed);
    if(opacity>100 || opacity<0){
        nPlus=-nPlus;
    }
    if(ie5){
        imgs.style.filter="alpha(opacity=0)";
 imgs.filters.alpha.opacity = opacity;
    }
    if(ns6){
        imgs.style.MozOpacity = 0 + '%';
 imgs.style.MozOpacity = opacity + '%';
    }
  }
}
onload=FadeImg;
//  End -->
</script>
<div id="img1">
  <img src="017s.jpg" border=0 width=140 height=105>
</div>
<div id="img2">
  <img src="013s.jpg" border=0 width=140 height=105>
</div>

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

轮播图_没有过渡效果,带豆豆,鼠标控制停止,跳转图片

*{ margin:0;  padding:0; list-style: none; } #box{ position:relative; width:400px; height:30...
  • jiang7701037
  • jiang7701037
  • 2017年12月28日 08:41
  • 61

CSS3特效之转化(transform)和过渡(transition)

在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition)。有人可能会有疑问,CSS3动画不是只有animation一个属性吗?怎么又和转化(tr...
  • bingkingboy
  • bingkingboy
  • 2016年04月17日 20:31
  • 7168

Android 图片自动切换

Android 图片自动切换 效果图: 思路: 利用 android.support.v4.view.ViewPager 和线程实现图片切换。 1. 首先把图片放入分别放入不同的 Imag...
  • w2298119289j
  • w2298119289j
  • 2017年06月21日 00:08
  • 315

js实现图片自动切换

*{margin:0;padding:0;list-style-type:none;} body{font:12px/180% Arial, Helvetica, sans-serif, "宋体";c...
  • wojiaohuangyu
  • wojiaohuangyu
  • 2015年10月09日 12:39
  • 1195

JQuery实现图片切换(自动切换+手动切换)

JQuery实现图片切换(自动切换+手动切换)
  • huyuyang6688
  • huyuyang6688
  • 2015年01月31日 21:26
  • 12679

使用ViewPager实现图片自动切换

1、ViewPager讲解    ViewPager是中的控件,使用时直接在布局文件中引用,跟正常控件一样。但是,要给ViewPager设置适配器PagerAdapter,其中有四个方法是适配器Pag...
  • supersnow0622
  • supersnow0622
  • 2016年04月13日 19:33
  • 1756

原生js+css3实现图片自动切换,图片轮播

运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 ...
  • pspgbhu
  • pspgbhu
  • 2016年05月21日 03:01
  • 6172

纯css3实现图片自动切换

实现图片自动切换需要用到的主要是css3里面的过渡这一节的内容。 大致思路是这样的: 1、将图片设置为li的背景图片; 2、规定一个@keyframes的规则使得图片按照这个规则进行切换; 3...
  • HL141916
  • HL141916
  • 2017年05月25日 20:44
  • 1859

图片切换效果(有过渡效果,不抖动)

  var bannerAD=new Array(); var bannerADlink=new Array(); var adNum=0; bannerAD[0]="images/top.jp...
  • haibo0668
  • haibo0668
  • 2016年06月02日 12:49
  • 223

ViewPager实现每隔两秒自动切换图片

布局代码: 1 RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns...
  • wonghoman
  • wonghoman
  • 2014年05月20日 07:19
  • 866
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片自动切换(没有过渡效果)
举报原因:
原因补充:

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