图片切换

最新推荐文章于 2024-10-14 22:51:52 发布

a274915611

最新推荐文章于 2024-10-14 22:51:52 发布

阅读量375

点赞数

文章标签： stylesheet function transition filter xhtml html

本文链接：https://blog.csdn.net/a274915611/article/details/3150187

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">

<head>
<title>图片切换演练</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></meta>
<link rel="stylesheet" rev="stylesheet" href=".css" type="text/css" media="all" />

/********************************************************
* 使用 Ms Css 中 filter:RevealTrans 切换图片
********************************************************/

function filterImages()
{
// 定义要放影的图片图径的数组
var imgSrcArr = ["images/a.jpg","images/b.jpg","images/c.jpg","images/d.jpg","images/e.jpg"];

var oImg = document.getElementById("oImg");

var iCurIndex = -1;

if( arguments.length == 0 )
{
// 获得当前是第几张图片
iCurIndex = parseInt( oImg.getAttribute("curPicNum") ) ;

// 获得总图片数量,必须小于或等于图片路径数组的长度
var iTotalPicNum = parseInt( oImg.getAttribute("totalPicNum") ) ;

  iCurIndex++; // 放影下一张图片,若到了最后一张,则放影第一经
  if ( iCurIndex > iTotalPicNum )
  {
   iCurIndex = 1;
  }
}else
{
  iCurIndex = arguments[0] ;
}

/* Apply()及Play() 是两个相关的方法.
* 你可以这样理解:先不管这两个方法,看看这两个方法之间的语句.
* 猜测一下页面上应用了滤镜的内容是如何变化的.
* 具体到本例子来说,就是图片换成了另一张啦.
* 好,这个过程就会以滤镜的效果"优雅"地显示出来
*/
oImg.filters[0].Apply();

oImg.src = imgSrcArr[ iCurIndex - 1 ];

oImg.setAttribute("curPicNum",iCurIndex);

iTrans = Math.floor ( Math.random( ) * (12+1 ) ) ;// 动态变换的方式有12种
oImg.filters[0].transition = iTrans ;

oImg.filters[0].Play(1);

if( arguments.length == 0 )
{
iTimerId = window.setTimeout(filterImages,4000);
}
}

var iTimerId = null;

window.onload = function ()
{
iTimerId = window.setTimeout(filterImages,4000);
}

function smallImgOver(index)
{
filterImages(index) ; // 取消时间间隔事件
window.clearTimeout( iTimerId ) ;
}

function smallImgOut()
{
// 恢复时间间隔事件
iTimerId = window.setTimeout(filterImages,4000);
}

/********************************************************   *
* 功能说明:           *
* 简单的图征切换,请与有滤镜的图片切换相比较.   *
********************************************************/
function SimpleChangePic()
{
// 定义要放影的图片图径的数组
var imgSrcArr = ["images/a.jpg","images/b.jpg","images/c.jpg","images/d.jpg","images/e.jpg"];

var oImg = document.getElementById("oImgSimple"); // <=== 注意ID

// 获得当前是第几张图片
var iCurIndex = parseInt( oImg.getAttribute("curPicNum") ) ;

// 获得总图片数量,必须小于或等于图片路径数组的长度
var iTotalPicNum = parseInt( oImg.getAttribute("totalPicNum") ) ;

iCurIndex++; // 放影下一张图片,若到了最后一张,则放影第一经
if ( iCurIndex > iTotalPicNum )
{
iCurIndex = 1;
}
oImg.src = imgSrcArr[ iCurIndex - 1 ];

oImg.setAttribute("curPicNum",iCurIndex);

}

</script>

<div>

<img id="oImg" curPicNum="1" totalPicNum="5"
  src="images/a.jpg" style="filter:RevealTrans ( duration = 2，transition=12 ); clear:both;"
  width="263" height="335" />
  <div>
  <img src="images/a.jpg" οnmοuseοver="smallImgOver(1)" οnmοuseοut="smallImgOut()"
  width="56" height="42" alt=""/>
  <img src="images/b.jpg" οnmοuseοver="smallImgOver(2)" οnmοuseοut="smallImgOut()"
  width="56" height="42" alt=""/>
  <img src="images/c.jpg" οnmοuseοver="smallImgOver(3)" οnmοuseοut="smallImgOut()"
  width="56" height="42" alt=""/>
  <img src="images/d.jpg" οnmοuseοver="smallImgOver(4)" οnmοuseοut="smallImgOut()"
  width="56" height="42" alt=""/>
  <img src="images/e.jpg" οnmοuseοver="smallImgOver(5)" οnmοuseοut="smallImgOut()"
  width="56" height="42" alt=""/>
  </div>
  <div>请将鼠标到小图上查看效果</div>