javascript有关图片

最新推荐文章于 2022-09-19 19:06:59 发布

iteye_15968

最新推荐文章于 2022-09-19 19:06:59 发布

阅读量93

点赞数

文章标签： JavaScript HTML ViewUI

本文介绍了一种使用JavaScript实现的轮播图效果，通过预加载图片和过渡效果增强用户体验。文章详细展示了如何设置图片切换的时间间隔及过渡效果，并提供了一个简单的测试页面。

Media_Play.js

<!-- //bannerADrotator为图片的名字
var bannerAD=new Array();
var bannerADlink=new Array();
var adNum=0;
bannerAD[0]="pic/1.jpg"; //路径
bannerADlink[0]="#";
bannerAD[1]="pic/2.jpg";
bannerADlink[1]="#";
bannerAD[2]="pic/3.jpg";
bannerADlink[2]="#";
bannerAD[3]="pic/4.jpg";
bannerADlink[3]="#";

var preloadedimages=new Array();
for (i=1;i<5;i++){
preloadedimages[i]=new Image();
preloadedimages[i].src=bannerAD[i];
}

function setTransition(){
if (document.all){
bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
bannerADrotator.filters.revealTrans.apply();
}
}

function playTransition(){
if (document.all)
bannerADrotator.filters.revealTrans.play()
}

function nextAd(){
if(adNum<bannerAD.length-1)adNum++ ;
else adNum=0;
setTransition();
document.images.bannerADrotator.src=bannerAD[adNum];
playTransition();
theTimer=setTimeout("nextAd()", 3000);
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>动态图片显示</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>