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


Posted in Javascript onSeptember 08, 2015

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

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

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
在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]="https://3water.com/";
imgUrl[2]="images/2.jpg";
imgtext[2]="Cengiz Bodur时尚插画作品欣赏";
imgLink[2]="https://3water.com/";
imgUrl[3]="images/3.jpg";
imgtext[3]="韩国junillust猫人插画欣赏(二)";
imgLink[3]="https://3water.com/";
imgUrl[4]="images/4.jpg";
imgtext[4]="韩国KIKI插画作品之人物精选";
imgLink[4]="https://3water.com/";

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带前后翻页的图片切换效果代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
this和执行上下文实现代码
Jul 01 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
理解JavaScript中的Proxy 与 Reflection API
Sep 21 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 #Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 #Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 #Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 #Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 #Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 #Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 #Javascript
You might like
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python根据出生年份简单计算生肖的方法
2015/03/27 Python
python中查看变量内存地址的方法
2015/05/05 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
pytorch 预训练层的使用方法
2019/08/20 Python
python判断元素是否存在的实例方法
2020/09/24 Python
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
办公室文员工作自我评价
2013/12/01 职场文书
大学生自我鉴定范文模板
2014/01/21 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
股东合作协议书
2014/04/14 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
vue ref如何获取子组件属性值
2022/03/31 Vue.js
在Docker容器中部署SQL Server
2022/04/11 Servers