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


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 相关文章推荐
JS重要知识点小结
Nov 06 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
Js经典案例的实例代码
May 10 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
JS 事件机制完整示例分析
Jan 15 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 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伪静态的实现详细介绍
2013/04/28 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
JQuery实现可直接编辑的表格
2015/04/16 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
梳理一下vue中的生命周期
2020/12/30 Vue.js
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
浅谈Python 递归算法指归
2019/08/22 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
全球度假村:Club Med
2017/11/27 全球购物
上班上网检讨书
2014/01/29 职场文书
会计系毕业生求职信
2014/05/28 职场文书
党员个人剖析材料
2014/09/30 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
技术转让协议书
2016/03/19 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python