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


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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
用YUI做了个标签浏览效果
Feb 20 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
Vue实现简单购物车功能
Dec 13 Vue.js
React Fragment介绍与使用详解
Nov 11 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优于Node.js的五大理由分享
2012/09/15 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
JS基于面向对象实现的拖拽功能示例
2016/12/20 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
python学习手册中的python多态示例代码
2014/01/21 Python
Python continue语句用法实例
2014/03/11 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python读取实时数据流示例
2019/12/02 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
Django admin组件的使用
2020/10/24 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
美国最大的团购网站:Groupon
2016/07/23 全球购物
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
Android面试题附答案
2014/12/08 面试题
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
特教教师先进事迹
2014/05/21 职场文书
国防教育标语
2014/10/08 职场文书
2015年女生节活动总结
2015/02/27 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
python执行js代码的方法
2021/05/13 Python
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang