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


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 简单的进度条实现代码
Mar 11 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
js+canvas实现纸牌游戏
Mar 16 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 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模板,主要想体现一下思路
2006/12/25 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
详解Python安装scrapy的正确姿势
2018/06/26 Python
python实现随机漫步算法
2018/08/27 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
python中str内置函数用法总结
2020/12/27 Python
Python中生成ndarray实例讲解
2021/02/22 Python
基于Python 函数和方法的区别说明
2021/03/24 Python
董事长职责范文
2013/11/08 职场文书
优秀教师主要事迹
2014/02/01 职场文书
二手房购房意向书范本
2014/04/01 职场文书
学习之星事迹材料
2014/05/17 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL