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


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代码
Apr 22 Javascript
Javascript 多物体运动的实现
Dec 24 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
js通过循环多张图片实现动画效果
Dec 19 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 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
解析MySql与Java的时间类型
2013/06/22 PHP
微信支付开发订单查询实例
2016/07/12 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
python中pyqtgraph知识点总结
2021/01/26 Python
SQL Server笔试题
2012/01/10 面试题
Ajxa常见问题都有哪些
2014/03/26 面试题
工程专业毕业生自荐信范文
2013/12/25 职场文书
化学教师教学反思
2014/01/17 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
优秀教师个人总结
2015/02/11 职场文书
党员承诺书范文2015
2015/04/27 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
建党伟业的观后感
2015/06/01 职场文书
总经理年会致辞
2015/07/29 职场文书
期中考试后的感想
2015/08/07 职场文书
Sql Server之数据类型详解
2022/02/28 SQL Server