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


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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
json数据处理及数据绑定
Jan 25 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
vue cli 全面解析
Feb 28 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
php处理json时中文问题的解决方法
2011/04/12 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
在Django中实现添加user到group并查看
2019/11/18 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
香港礼品网站:GiftU eshop
2017/09/01 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
如何利用find命令查找文件
2016/11/18 面试题
毕业生求职推荐信
2013/11/04 职场文书
环保倡议书50字
2014/05/15 职场文书
岗位明星事迹材料
2014/05/18 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
vue3中provide && inject的使用
2021/07/01 Vue.js
SQL Server Agent 服务无法启动
2022/04/20 SQL Server