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


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 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
TopList标签和JavaScript结合两例
Aug 12 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
php学习 字符串课件
2008/06/15 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
Python删除空文件和空文件夹的方法
2015/07/14 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
Django 路由控制的实现
2019/07/17 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
Python字典实现伪切片功能
2020/10/28 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
《老山界》教学反思
2014/04/08 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
小学数学教师研修日志
2015/11/13 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
Python如何配置环境变量详解
2021/05/18 Python