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


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 相关文章推荐
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
fastadmin中调用js的方法
May 14 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
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
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
Python如何实现转换URL详解
2019/07/02 Python
Python循环实现n的全排列功能
2019/09/16 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
python实现经纬度采样的示例代码
2020/12/10 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
2015年检验科工作总结
2015/04/27 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis