首页一个搜索框,一个搜索按钮
下面一个css图片框.navboxcont_77E711 { width: 80px; height:80px}
搜索框,输入代码如00001,点击“搜索”
那么<div class="navboxcont_77E711"><img src="images/00001.jpg" /></div>如输入02023,单击“搜索”
那么<div class="navboxcont_77E711"><img src="images/02023.jpg" /></div>
等等
也就是搜索框输入的是什么代码,点击“搜索”后它就显示images文件夹里以这个代码为名称的图片,格式都是jpg的
打开页面吗默认显示为00001现在代码如下:<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.navboxcont_77E711 { width: 80px; height:80px}
</style>
<script type="text/javascript">
function Search(){
document.getElementById("img1").src = "images/" + document.getElementById("txt").value + ".jpg";
}
</script>
</head><body>
<input type="text" id="txt" /><input type="button" value="搜索" onclick="Search()" />
<div class="navboxcont_77E711"><img src="images/00001.jpg" id="img1" /></div>
</body>
</html>
以上代码已经正确了
现在想添加一段文字连接,就是“下一张”,和“上一张”
点击这个“下一张”,navboxcont_77E711图片框里的图片更改为images里当前图片的下一个图片文件,如images里的0001.jpg的下一张为0004.jpg,下一张为0005.jpg,下一张为0008.jpg......,当前为0001点击“下一张”,图片框换成0004.jpg,在点击“下一张”图片框换成0005.jpg,在点击“下一张”图片框换成0008.jpg......循环,当点击到最后一张时,再点击“下一张”回到第一张图片,也就是循环
点击“上一张”的和他效果相反,当碰到第一张图片再点击"上一张“时是显示最后一张,
也就是一个正循环显示,一个反循环显示
这个下一张和上一张该怎么写,按钮也行,能实现这个功能就行 。已知images文件夹里有:如 001.jpg ,002.jpg, 005.jpg, 008.jpg, 0020.jpg ,00020.jpg 这些图片
下面一个css图片框.navboxcont_77E711 { width: 80px; height:80px}
搜索框,输入代码如00001,点击“搜索”
那么<div class="navboxcont_77E711"><img src="images/00001.jpg" /></div>如输入02023,单击“搜索”
那么<div class="navboxcont_77E711"><img src="images/02023.jpg" /></div>
等等
也就是搜索框输入的是什么代码,点击“搜索”后它就显示images文件夹里以这个代码为名称的图片,格式都是jpg的
打开页面吗默认显示为00001现在代码如下:<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.navboxcont_77E711 { width: 80px; height:80px}
</style>
<script type="text/javascript">
function Search(){
document.getElementById("img1").src = "images/" + document.getElementById("txt").value + ".jpg";
}
</script>
</head><body>
<input type="text" id="txt" /><input type="button" value="搜索" onclick="Search()" />
<div class="navboxcont_77E711"><img src="images/00001.jpg" id="img1" /></div>
</body>
</html>
以上代码已经正确了
现在想添加一段文字连接,就是“下一张”,和“上一张”
点击这个“下一张”,navboxcont_77E711图片框里的图片更改为images里当前图片的下一个图片文件,如images里的0001.jpg的下一张为0004.jpg,下一张为0005.jpg,下一张为0008.jpg......,当前为0001点击“下一张”,图片框换成0004.jpg,在点击“下一张”图片框换成0005.jpg,在点击“下一张”图片框换成0008.jpg......循环,当点击到最后一张时,再点击“下一张”回到第一张图片,也就是循环
点击“上一张”的和他效果相反,当碰到第一张图片再点击"上一张“时是显示最后一张,
也就是一个正循环显示,一个反循环显示
这个下一张和上一张该怎么写,按钮也行,能实现这个功能就行 。已知images文件夹里有:如 001.jpg ,002.jpg, 005.jpg, 008.jpg, 0020.jpg ,00020.jpg 这些图片
解决方案 »
- html中出生日期内容在输入身份证号码后自动生成,与身份证号一一对应,不能单独修改
- 谁能帮忙写段匹配table的正则表达式(哎,正则表达式老是学不会,悲哀!)
- js className的兼容性问题
- 高分求助图片欲加载代码!(急)
- jqChart 去掉打印按钮
- 弹出式窗口间select框传值问题,谢谢
- 一个session 值如何传递给JS
- 如何获得DIV+TABLE组合下的宽度和高度.
- 哪位大侠帮我看一看,为什么点击按钮后alert出来的总是24,并且滚层的高度不理想
- 根据编号对单元格进行合并。做了部份不知错在哪了?
- doucment.onKeydown
- google map 上面如何画框?效果类似www.woxiangyougejia.com
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 无标题文档</title>
<style type="text/css">
.navboxcont_77E711 { width: 80px; height:80px}
</style>
</head><body>
<input type="text" id="txt" /><input type="button" value="搜索" onclick="Search()" />
<div class="navboxcont_77E711"><img src="images/00001.jpg" id="img1" /></div>
<a href="#" id="prev">上一张</a>
<a href="#" id="next">下一张</a>
<script type="text/javascript">
function Search(){
document.getElementById("img1").src = "images/" + document.getElementById("txt").value + ".jpg";
}var btnprev = document.getElementById('prev');
var btnnext = document.getElementById('next');
var cout = ['0001','0004','0005','0008'];
var i = cout.length;
btnprev.onclick = function(){
i--;
if(i<0){
i=cout.length-1;
}
document.getElementById("img1").src = "images/" + cout[i] + ".jpg";
}
btnnext.onclick = function(){
i++;
if(i>cout.length-1){
i=0;
}
document.getElementById("img1").src = "images/" + cout[i] + ".jpg";
}</script>
</body>
</html>
<script type="text/javascript">
Array.prototype.indexOf=function(o){
for(var i=0;i<this.length;i++){
if(this[i]==o)return i;
}
return -1;
}
function movePic(i){
var list=["001.jpg" ,"002.jpg" , "005.jpg" , "008.jpg" , "0020.jpg" , "00020.jpg"];
var imgP=document.getElementById("img1").src.split("/");
var index=list.indexOf(imgP[imgP.length-1]);
index+=i;
if(i==-1 && index==-1)index=list.length-1;
if(i== 1 && index==list.length)index=0;
if(index==-1)index=0;
document.getElementById("img1").src = "images/" + list[index];
document.getElementById("img1").title = "images/" + list[index];
}</script>
<div class="navboxcont_77E711"><img src="images/001.jpg" id="img1"/></div>
<input type=button value=prev onclick="movePic(-1);">
<input type=button value=next onclick="movePic(1);">
function Search(){
document.getElementById("img1").src = "images/" + document.getElementById("txt").value + ".jpg";
}var btnprev = document.getElementById('prev');
var btnnext = document.getElementById('next');
var cout = ['00001','00004','00005','00008'];
var i = 0;
btnprev.onclick = function(){
i--;
if(i<0){
i=cout.length-1;
}
document.getElementById("img1").src = "images/" + cout[i] + ".jpg";
}
btnnext.onclick = function(){
i++;
if(i>cout.length-1){
i=0;
}
document.getElementById("img1").src = "images/" + cout[i] + ".jpg";
}</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>实验</title>
<style type="text/css">.navboxcont_77E711 { width: 1028px; height:701px}
.navboxcont_77E712 { text-align: center; width: 1028px; height:50px}
.navboxauto_6B6CBB { margin-left:150px;width:auto; height:23px}
.navboxcont_3E6FD3 { text-align: center;width: 1028px; height:100px}
.navboxcont_3FD714 { width: 100%; height:30px}
.navboxleft_3FD714 { text-align: center; width:490px; float:left; height:30px }
.navboxauto_3FD714 { text-align: center; margin-left:490px; width:auto; height:30px }
.navboxcont_56AC5A { width: 100%; height:20px}
.navboxleft_56AC5A { width:900px; float:left; height:20px}
.navboxauto_56AC5A { margin-left:900px; width:auto; height:20px}#rowf4 {
width:18%;
float:left; text-align:center;
font-size: small;
}
#leftright, #topdown{position:absolute;left:0;
top:0;width:1px;height:1px;layer-background-color:red;
background-color:red;z-index:100;font-size:1px;}
<script type="text/javascript">
function Search(){document.getElementById("img1").src = "shanghai/" + document.getElementById("txt").value + ".GIF";}</script>
</head><body><div class="navboxcont_3E6FD3">
<center><img src="aa/logo.gif" /></center>
</div>
<div class="navboxcont_77E712"><font size="6" color="#00de00">上 海</font></div> <div class="navboxauto_6B6CBB"><input type="text" id="txt" size="49" value="请输入股票代码"onclick="this.value='';" />
<input type="button" value="确<>定" onclick="Search()" /></div>
<br><div class="navboxcont_77E711"><center><img src="shanghai/000001.GIF" id="img1" onerror="this.src='aa/ww.gif'"/></center>
</div><div id="leftright" style="width:expression(document.body.clientWidth-2)"></div><div
id="topdown" style="height:expression(document.body.clientHeight-2)"></div>
<script>
<!--
if (document.all&&!window.print){
leftright.style.width=document.body.clientWidth-2
topdown.style.height=document.body.clientHeight-2
}
else if (document.layers){
document.leftright.clip.width=window.innerWidth
document.leftright.clip.height=1
document.topdown.clip.width=1
document.topdown.clip.height=window.innerHeight
}
function followmouse1(){
//move cross engine for IE 4+
leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
topdown.style.pixelTop=document.body.scrollTop
if (event.clientX<document.body.clientWidth-2)
topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
else
topdown.style.pixelLeft=document.body.clientWidth-2
}
function followmouse2(e){
document.leftright.top=e.y+1
document.topdown.top=pageYOffset
document.topdown.left=e.x+1
}
if (document.all)
document.onmousemove=followmouse1
else if (document.layers){
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=followmouse2
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
setTimeout("window.onresize=regenerate",400)
}
if ((document.all&&!window.print)||document.layers)
window.onload=regenerate2
//-->
</script>
</body>
</html>老师,我的代码写成这样了,整合以上两种都没整合明白,该怎么和我这段代码整合啊,还有就是如现在的排列是var cout = ['000001','000004','000005','000008'];那么我在搜索框输入000004,然后点击“确定”,这时显示的是000004的图片,这时我如果按“下一张”要求他应该显示'000005'的图片,我如果点击“上一页”,他应该显示'000001'的图片,也就是说这个“上一页”和“下一页”,是以当前显示图片而定的,该怎么整合
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>实验</title>
<style type="text/css">.navboxcont_77E711 { width: 1028px; height:701px}
.navboxcont_77E712 { text-align: center; width: 1028px; height:50px}
.navboxauto_6B6CBB { margin-left:150px;width:auto; height:23px}
.navboxcont_3E6FD3 { text-align: center;width: 1028px; height:100px}
.navboxcont_3FD714 { width: 100%; height:30px}
.navboxleft_3FD714 { text-align: center; width:490px; float:left; height:30px }
.navboxauto_3FD714 { text-align: center; margin-left:490px; width:auto; height:30px }
.navboxcont_56AC5A { width: 100%; height:20px}
.navboxleft_56AC5A { width:900px; float:left; height:20px}
.navboxauto_56AC5A { margin-left:900px; width:auto; height:20px}#rowf4 {
width:18%;
float:left; text-align:center;
font-size: small;
}
#leftright, #topdown{position:absolute;left:0;
top:0;width:1px;height:1px;layer-background-color:red;
background-color:red;z-index:100;font-size:1px;}
<script type="text/javascript">
function Search(){document.getElementById("img1").src = "shanghai/" + document.getElementById("txt").value + ".GIF";
document.getElementById("img1").title = "shanghai/" + document.getElementById("txt").value + ".GIF";}
Array.prototype.indexOf=function(o){
for(var i=0;i<this.length;i++){
if(this[i]==o)return i;
}
return -1;
}function movePic(i){
var list=['000001','000004','000005','000008'];
var imgP=document.getElementById("img1").src.split("/");
var index=list.indexOf(imgP[imgP.length-1].split(".")[0]);
index+=i;
if(i==-1 && index==-1)index=list.length-1;
if(i== 1 && index==list.length)index=0;
if(index==-1)index=0;
document.getElementById("img1").src = "shanghai/" + list[index]+".GIF";
document.getElementById("img1").title = "shanghai/" + list[index]+".GIF";
}</script>
</head><body><div class="navboxcont_3E6FD3">
<center><img src="aa/logo.gif" /></center>
</div>
<div class="navboxcont_77E712"><font size="6" color="#00de00">上 海</font></div><div class="navboxauto_6B6CBB"><input type="text" id="txt" size="49" value="请输入股票代码"onclick="this.value='';" />
<input type="button" value="确<>定" onclick="Search()" />
<input type=button value=prev onclick="movePic(-1);">
<input type=button value=next onclick="movePic(1);"></div>
<br><div class="navboxcont_77E711"><center><img src="shanghai/000001.GIF" id="img1" onerror="this.src='aa/ww.gif'"/></center>
</div><div id="leftright" style="width:expression(document.body.clientWidth-2)"></div><div
id="topdown" style="height:expression(document.body.clientHeight-2)"></div>
<script>
<!--
if (document.all&&!window.print){
leftright.style.width=document.body.clientWidth-2
topdown.style.height=document.body.clientHeight-2
}
else if (document.layers){
document.leftright.clip.width=window.innerWidth
document.leftright.clip.height=1
document.topdown.clip.width=1
document.topdown.clip.height=window.innerHeight
}
function followmouse1(){
//move cross engine for IE 4+
leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
topdown.style.pixelTop=document.body.scrollTop
if (event.clientX<document.body.clientWidth-2)
topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
else
topdown.style.pixelLeft=document.body.clientWidth-2
}
function followmouse2(e){
document.leftright.top=e.y+1
document.topdown.top=pageYOffset
document.topdown.left=e.x+1
}
if (document.all)
document.onmousemove=followmouse1
else if (document.layers){
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=followmouse2
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
setTimeout("window.onresize=regenerate",400)
}
if ((document.all&&!window.print)||document.layers)
window.onload=regenerate2
//-->
</script>
</body>
</html>