filters.revealTrans应用：JS广告轮显代码

最新推荐文章于 2020-02-11 11:16:43 发布

原创最新推荐文章于 2020-02-11 11:16:43 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

在线笔记专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页轮播图的方法。通过定义图片数组和链接数组，结合定时器和事件监听来自动切换展示的图片，并为每张图片设置跳转链接。


var bannerImgs = ['index/AD1.jpg','index/AD2.jpg'];
var bannerLinks = ['http:// www.peixunme.com/',' http://www.taobaobrand.com/'];
var bannerLen = bannerImgs.length;
var bannerNum = 0;
var bannerLink = bannerLinks[0];

function banner_onClick(){
window.open(bannerLink);
}

function changebannerImg(){
var myImg = document.getElementById('banner');
try{
var rt;
if((rt=myImg.filters.revealTrans)!=null){
   rt.apply();
   myImg.src = 'images/'+bannerImgs[bannerNum++];
   bannerLink = bannerLinks[bannerNum-1];
   rt.transition=Math.floor(Math.random()*23);
   rt.play();
   if(bannerNum>=bannerLen)
    bannerNum = 0;
}
} catch(e){
myImg.src = 'images/'+bannerImgs[bannerNum++];
bannerLink = bannerLinks[bannerNum-1];
if(bannerNum>=bannerLen)
    bannerNum = 0;
}
}

var bannerTimeId = window.setInterval('changebannerImg()',9000);