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

前端技术 2023/09/02 JavaScript

本文实例讲述了javascript带前后翻页的图片切换效果。分享给大家供大家参考。具体如下：
这是一款基于javascript带前后翻页的图片切换效果代码，实现过程很简单。
运行效果图： -------------------查看效果-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
在head区域引入CSS样式：

<link href=\"css/css.css\" rel=\"stylesheet\" type=\"text/css\" />

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

<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
<title>带前后翻页的JS图片切换效果</title>
<link href=\"css/css.css\" rel=\"stylesheet\" type=\"text/css\" />
<script language=JavaScript>
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]=\"http://www.phpstudy.net/\";
imgUrl[2]=\"images/2.jpg\";
imgtext[2]=\"Cengiz Bodur时尚插画作品欣赏\";
imgLink[2]=\"http://www.phpstudy.net/\";
imgUrl[3]=\"images/3.jpg\";
imgtext[3]=\"韩国junillust猫人插画欣赏(二)\";
imgLink[3]=\"http://www.phpstudy.net/\";
imgUrl[4]=\"images/4.jpg\";
imgtext[4]=\"韩国KIKI插画作品之人物精选\";
imgLink[4]=\"http://www.phpstudy.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<count)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=\"<a href=\"+imgLink[adNum]+\" target=_blank>\"+imgtext[adNum]+\"</a>\";
 setTimeout(\"nextAd()\", 3000); //控制时间
}

function nextAd2(){
 if(adNum<count)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=\"<a href=\"+imgLink[adNum]+\" target=_blank>\"+imgtext[adNum]+\"</a>\";
 
}
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=\"<a href=\"+imgLink[adNum]+\" target=_blank>\"+imgtext[adNum]+\"</a>\";
 
}
function goUrl(){
window.open(imgLink[adNum],\'_blank\');
}
</script>
</head>

<body>
<DIV align=\"center\" ><br /><br />

<div class=\"table\">
<div class=\"table_1_1\">
<div class=\"table_1_1_pic\">
<a href=\"javascript:goUrl()\"><img style=\"FILTER: revealTrans(duration=1,transition=5);border-color:black;color:#000000\" src=\"images/3.jpg\" width=\"430\" height=\"210\" border=\"0\" name=\"imgInit\"></a>
</div>
<div class=\"table_1_1_pic\"><div class=\"table_1_1_title\"><img src=\"images/title.gif\"> <span id=\"focustext\"></span></div><div class=\"table_1_1_page\"><img src=\"images/news_p.jpg\" alt=\"上一条\" width=\"6\" height=\"17\" align=\"absbottom\" /> <a href=\"javascript:prondAd()\">PREV</a> | <a href=\"javascript:nextAd2()\">NEXT</a> <img src=\"images/news_n.jpg\" alt=\"下一篇\" width=\"6\" height=\"17\" align=\"absbottom\" /></div></div>
</div>
</div>
</body>
</html>

以上就是为大家分享的javascript带前后翻页的图片切换效果代码，希望大家可以喜欢，并应用到实践中。

本文地址：https://www.stayed.cn/item/5994

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案