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 相关文章推荐
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
vue组件学习教程
Sep 09 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
小程序分享链接onShareAppMessage的具体用法
May 22 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
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
php基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
python技能之数据导出excel的实例代码
2017/08/11 Python
django2 快速安装指南分享
2018/01/05 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
详解Python with/as使用说明
2018/12/13 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
送货司机岗位职责
2013/12/11 职场文书
优秀学生事迹材料
2014/02/08 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
迎国庆横幅标语
2014/10/08 职场文书
政风行风评议心得体会
2014/10/21 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
vue使用element-ui按需引入
2022/05/20 Vue.js