js简单实现切换图片上一张下一张功能


<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>照片点击切换</title>
</head>
<style>*{margin:0;padding:0;}#picBox{margin:100px auto;width:600px;height:400px;}#pic{width:600px;height:400px;}#buttonBox{width:150px;margin:10px auto;}
</style>
<body>
<div id="picBox"><img src="1.jpg" id="pic"><div id="buttonBox"><input type="button" value="上一张" onclick="pre();"><input type="button" value="下一张" onclick="next();"></div>
</div>
<script>var picArr=new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg");var index=0;function next(){index++;if(index==picArr.length){index=0;}document.getElementById("pic").src=picArr[index];}function pre(){index--;if(index<0){index=picArr.length-1;}document.getElementById("pic").src=picArr[index];}
</script>
</body>

js简单实现切换图片上一张下一张功能相关推荐

HTML鼠标悬浮空心圆点切换图片,js实现鼠标切换图片（无定时器）
本文实例为大家分享了js实现鼠标切换图片的具体代码,供大家参考,具体内容如下实现效果,可以利用鼠标移动在对应的小点点上,或者点击左右两侧的箭头切换图片,并在图片的上方显示出图片的页数,下方显示出对应 ...
js简单实现基于图片的路线规划导航
js简单实现基于图片的路线规划导航 <%@ page language="java" import="java.util.*" pageEncoding= ...
iOS学习：调用相机，选择图片上传，带预览功能
iOS学习:调用相机,选择图片上传,带预览功能发表于2年前(2013-05-30 21:38) 阅读( 18194) | 评论( 16) 27人收藏此文章,我要收藏赞3 8月22日珠海 OSC ...
layui图片上传增加删除图标以及功能
layui图片上传组件是没有删除功能的,这里自己增加删除功能: //删除图标var imgX = document.createElement("img"); imgX.src = ...
php下一页的代码,PHP简单实现上一页下一页功能示例
本文实例讲述了PHP简单实现上一页下一页功能.分享给大家供大家参考,具体如下: 思路整理: 现在好多人用id的增1和减1实现上一篇和下一篇,但是难道文章ID不会断了吗?所以你要知道上个ID和个ID是多 ...
三种代码为wordpress添加上一篇/下一篇功能
WordPress没有内置"上一篇下一篇"功能,可是这个功能却是我们经常用到的,它不仅可以提高网站的用户体验度,而且能留住访客的脚步,增加网站的PV值. 现在wordpress模 ...
ShopEx文章页增加上一篇下一篇功能
在所有的文章页中,会经常发现都会有这么一个功能,能引导用户去查看上一篇文章或下一篇文章,而在ShopEx中,我DEZEND了一下文章模型,并没有找到上一篇这样的函数功能,因此,这就需要我们手动在对应的 ...
用Java 实现文章内容上一篇下一篇功能
ITDragon博客用Java 实现文章内容上一篇下一篇功能,逻辑和分页不一样.效果和本页面底部一样.采用的是Spring data jpa SQL语句实现该功能 SQL 语句查询的是该数据的上一条 ...
点击图片实现上一张下一张JS
用js实现.点击图片的左边,去上一张:点击图片的右边,去下一张. Jquery脚本在http://jquery.com/ 下载 Jquery实现比较简单 <script src="ht ...
js实现图片上一张下一张点击
1.实现效果 2.实现原理根据数组的长度和一个div的宽度,计算出父元素的长度. document.getElementById("goods_bx").style.width= ...

js简单实现切换图片上一张下一张功能

js简单实现切换图片上一张下一张功能相关推荐

最新文章

热门文章