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


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实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
微信小程序登录session的使用
Mar 17 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 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 获取select下拉列表框的值
2010/05/08 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
Python执行时间的计算方法小结
2017/03/17 Python
Python+Wordpress制作小说站
2017/04/14 Python
python记录程序运行时间的三种方法
2017/07/14 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
VC++笔试题
2014/10/13 面试题
儿科主治医生个人求职信
2013/09/23 职场文书
市场营销工作计划书
2014/05/06 职场文书
会计岗位说明书
2014/07/29 职场文书
小学校长汇报材料
2014/08/20 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书