点图片上一页下一页翻页效果


Posted in Javascript onJuly 09, 2008

<script language="javascript" defer>
var zhang=2
function next(){
if(zhang==7){
alert("这已经是最后一张了!")
zhang=6
}
document.getElementById("tu").src=zhang+".jpg"
text.innerHTML="当前是第"+zhang+"张图片"
zhang++
}
function up(){
if(zhang==2){
alert("这已经是第一张了!")
zhang=3
}
document.getElementById("tu").src=(zhang-2)+".jpg"
text.innerHTML="当前是第"+(zhang-2)+"张图片"
zhang--
}
</script>

<style type="text/css">
#divall {
position:relative;
}
#divleft {
border:1px red solid;
border-right:0px red solid;
background: url(bg.gif);
cursor:url("2.cur");
position:absolute;
top:0px;
z-index:2007;
text-align:right;
padding:0px
}
#divright {
border:1px red solid;
border-left:0px red solid;
background: url(bg.gif);
cursor:url("1.cur");
top:0px;
position:absolute;
z-index:2007
text-align:center;
padding:0px
}
#tu{z-index:-2007}
</style>

<div id="text"  >当前是第1张图片</div>
<div id="divall">
<img src="1.jpg" id="tu">

<div id="divleft" title="上一张" onmouseover="show_div('divleft','left.gif')" onmouseout="hide_div('divleft')" onclick="up()">
</div>

<div id="divright" title="下一张"  onmouseover="show_div('divright','right.gif')" onmouseout="hide_div('divright')" onclick="next()">
</div>
</div>
<script>//

var w=document.getElementById("tu").width//500
var h=document.getElementById("tu").height//400
document.getElementById("tu").style.width=w
document.getElementById("tu").style.height=h

//document.getElementById("divleft").style.visibility='hidden'
document.getElementById("divleft").style.width=w/2
document.getElementById("divleft").style.height=h
document.getElementById("divleft").style.left=0

//document.getElementById("divright").style.visibility='hidden'
document.getElementById("divright").style.width=w/2
document.getElementById("divright").style.height=h
document.getElementById("divright").style.left=w/2

//document.write("<style> #tu{width:"+w+"px; height:"+h+"px;z-index:2000}</style>")

function show_div(id,img){
document.getElementById(id).innerHTML="<img src="+img+">"
}
function hide_div(id){
document.getElementById(id).innerHTML=""
}
</script>

Javascript 相关文章推荐
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
在node中如何使用 ES6
Apr 22 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 Javascript
JS的数组的扩展实例代码
Jul 09 #Javascript
JS location几个方法小姐
Jul 09 #Javascript
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 #Javascript
javascript jQuery $.post $.ajax用法
Jul 09 #Javascript
javascript同步Import,同步调用外部js的方法
Jul 08 #Javascript
SWFObject Flash js调用类
Jul 08 #Javascript
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 #Javascript
You might like
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
python实现通过shelve修改对象实例
2014/09/26 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
pandas 对group进行聚合的例子
2019/12/27 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
2015年计生协会工作总结
2015/04/24 职场文书
死亡诗社观后感
2015/06/05 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL