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 相关文章推荐
JS面向对象编程 for Cookie
Sep 19 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
js实现多图左右切换功能
Aug 04 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
AngularJS中使用ngModal模态框实例
May 27 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
Javascript继承机制详解
2017/05/30 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python函数返回多个值的示例方法
2013/12/04 Python
python基础教程之udp端口扫描
2014/02/10 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
Python简单实现区域生长方式
2020/01/16 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
通信专业个人自我鉴定
2013/10/21 职场文书
绿色小区申报材料
2014/08/22 职场文书
内勤岗位职责范本
2015/04/13 职场文书
幽默导游词开场白
2015/05/29 职场文书
尼克胡哲观后感
2015/06/08 职场文书
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python