html图片分页效果代码,js带前后翻页的图片切换效果代码分享

本文实例讲述了javascript带前后翻页的图片切换效果。分享给大家供大家参考。具体如下：

这是一款基于javascript带前后翻页的图片切换效果代码，实现过程很简单。

运行效果图： -------------------查看效果-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。

在head区域引入CSS样式：

为大家分享的js带点自图片轮播幻灯片特效代码如下

带前后翻页的JS图片切换效果

var imgUrl=new Array();

var imgLink=new Array();

var imgtext=new Array();

var adNum=0;

imgUrl[1]="images/1.jpg";

imgtext[1]="韩国224儿童插画欣赏";

imgLink[1]="https://www.jb51.net/";

imgUrl[2]="images/2.jpg";

imgtext[2]="Cengiz Bodur时尚插画作品欣赏";

imgLink[2]="https://www.jb51.net/";

imgUrl[3]="images/3.jpg";

imgtext[3]="韩国junillust猫人插画欣赏(二)";

imgLink[3]="https://www.jb51.net/";

imgUrl[4]="images/4.jpg";

imgtext[4]="韩国KIKI插画作品之人物精选";

imgLink[4]="https://www.jb51.net/";

var imgPre=new Array();

var count=0;

for (i=1;i<=4;i++) {

if( (imgUrl[i]!="") && (imgLink[i]!="") ) {

count++;

} else {

break;

}

}

function playTran(){

if (document.all)

imgInit.filters.revealTrans.play();

}

var key=0;

function nextAd(){

if(adNum

else adNum=1;

if( key==0 ){

key=1;

} else if (document.all){

imgInit.filters.revealTrans.Transition=10;

imgInit.filters.revealTrans.apply();

playTran();

}

document.images.imgInit.src=imgUrl[adNum];

focustext.innerHTML=""+imgtext[adNum]+"";

setTimeout("nextAd()", 3000); //控制时间

}

function nextAd2(){

if(adNum

else adNum=1;

if( key==0 ){

key=1;

} else if (document.all){

imgInit.filters.revealTrans.Transition=10;

imgInit.filters.revealTrans.apply();

playTran();

}

document.images.imgInit.src=imgUrl[adNum];

focustext.innerHTML=""+imgtext[adNum]+"";

}

function prondAd(){

if(adNum>1)adNum-- ;

else adNum=4;

if( key==0 ){

key=1;

} else if (document.all){

imgInit.filters.revealTrans.Transition=10;

imgInit.filters.revealTrans.apply();

playTran();

}

document.images.imgInit.src=imgUrl[adNum];

focustext.innerHTML=""+imgtext[adNum]+"";

}

function goUrl(){

window.open(imgLink[adNum],'_blank');

}

 

  PREV | NEXT