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


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 模板数据绑定插件的使用方法详解
Jul 08 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
在vue中使用Base64转码的案例
Aug 07 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 json_encode中文乱码问题的解决办法
2013/09/09 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
JS 继承实例分析
2008/11/04 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
Python 3.x 新特性及10大变化
2015/06/12 Python
python随机数分布random测试
2018/08/27 Python
python实现自动登录
2018/09/17 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
python设置表格边框的具体方法
2020/07/17 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
苹果中国官方网站:Apple中国
2016/07/22 全球购物
C#实现启动一个进程
2016/10/01 面试题
企业给企业的表扬信
2014/01/13 职场文书
个人租房协议书
2014/11/28 职场文书
前台接待岗位职责
2015/02/03 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
python spilt()分隔字符串的实现示例
2021/05/21 Python
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android