如何用javascript实现网页图片的前进后退功能

2020-04-29 社会 51阅读


</title><br /> <script language="javascript" type="text/javascript"> <br /> function changeImage(imgCount){<br /> var srcc = document.getElementById("imgArea").src;<br /> <br /> document.getElementById("imgArea").src =imgCount+".jpg";<br /> <br /> alert(document.getElementById("imgArea").src);<br /> }<br /> function chnImg(flat){<br /> <br /> var src = document.getElementById("imgArea").src;<br /> alert(src);<br /> var num = parseInt(src.substr(src.lastIndexOf(".jpg")-1,5))+parseFloat(flat);<br /> if (num<1){num=4;}<br /> if (num>4){num=1;}<br /> document.getElementById("imgArea").src=num+".jpg";<br /> }<br /> </script><br /> </head><br /> <body><br /> <form name="pictureBox"><br /> <a href="javascript:changeImage('1');" name="雪景">雪景1</a>  <br /> <a href="javascript:changeImage('2');" name="雪景">雪景2</a>  <br /> <a href="javascript:changeImage('3');" name="雪景">雪景3</a>  <br /> <a href="javascript:changeImage('4');" name="雪景">雪景4</a><br /> <br /><br /> <img src="1.jpg" id="imgArea" align="middle" width="1000" height="550" /><br /> <br /><br /> <a href="javascript:chnImg('-1')">后退</a><br /> <a href="javascript:chnImg('1')">前进</a><br /> <a href="javascript:close();">关闭</a><br /> </form><br /> </body><br /></html><br />....考过去就好用....... </div> <div class="tags"> </div> <div class="clear"> <div class="shares"> <b>声明:你问我答网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流。若您的权利被侵害,请联系fangmu6661024@163.com</b> <div id="share" class="share-component social-share" data-sites="weibo,qzone,qq,wechat"> </div> </div> <div class="act"> <a href="JavaScript:" onclick="zan('328557148')" class="zan" title="赞"> <i class="iconfont bx bx-like"></i> <span id="zan">0</span> </a> </div> </div> <div class="clear"></div> </div> <div class="ny-ad"> </div> <div class="ny-ad"> </div> <div class="like"> <h3 class="title">最新文章</h3> <div class="piclist likep"> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/1244662155959101779.html" title="家庭遭受意外突发事件包括哪些,死亡算不算"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/3" class="cat">社会 </a> <h3> <a href="https://w.sf024.com/info/1244662155959101779.html" title="家庭遭受意外突发事件包括哪些,死亡算不算">家庭遭受意外突发事件包括哪些,死亡算不算</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-15 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 1079阅读 </span> </div> </div> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/141453225.html" title="麻烦大家帮我找一下美洲传统纹样图案"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/3" class="cat">社会 </a> <h3> <a href="https://w.sf024.com/info/141453225.html" title="麻烦大家帮我找一下美洲传统纹样图案">麻烦大家帮我找一下美洲传统纹样图案</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-15 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 210阅读 </span> </div> </div> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/1862419653107520267.html" title="海尔4k电视是三色4k还是四色4k!液晶屏是三星还是LG供应的?"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/3" class="cat">社会 </a> <h3> <a href="https://w.sf024.com/info/1862419653107520267.html" title="海尔4k电视是三色4k还是四色4k!液晶屏是三星还是LG供应的?">海尔4k电视是三色4k还是四色4k!液晶屏是三星还是LG供应的?</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-15 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 147阅读 </span> </div> </div> <div class="clear"></div> </div> </div> <div class="ny-ad"> </div> </div> <div class="sidebar"> <div class="widget postlist"> <h3>猜你喜欢</h3> <ul class="hasimg"> <li> <a href="https://w.sf024.com/info/328557148.html" title="如何用javascript实现网页图片的前进后退功能" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="如何用javascript实现网页图片的前进后退功能"> </a> <a href="https://w.sf024.com/info/328557148.html" target="">如何用javascript实现网...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 04-29 </span><span> <i class="iconfont bx bx-show"></i> 51阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/498133092834924364.html" title="如何用javascript实现图片点击切换,或者用jquery实现" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="如何用javascript实现图片点击切换,或者用jquery实现"> </a> <a href="https://w.sf024.com/info/498133092834924364.html" target="">如何用javascript实现图...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 09-18 </span><span> <i class="iconfont bx bx-show"></i> 81阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/748935024050921532.html" title="javascript怎么实现双击网页后自动滚动网页?本人对javascript不是很熟悉,代码最好可以简单点" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="javascript怎么实现双击网页后自动滚动网页?本人对javascript不是很熟悉,代码最好可以简单点"> </a> <a href="https://w.sf024.com/info/748935024050921532.html" target="">javascript怎么实现双击...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 08-14 </span><span> <i class="iconfont bx bx-show"></i> 40阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/576376209.html" title="javascript 如何用图片素材拼背景" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="javascript 如何用图片素材拼背景"> </a> <a href="https://w.sf024.com/info/576376209.html" target="">javascript 如何用图片...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 04-16 </span><span> <i class="iconfont bx bx-show"></i> 168阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/416196971.html" title="做一个带左右箭头的图片切换效果,只用javascript和css来实现。" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="做一个带左右箭头的图片切换效果,只用javascript和css来实现。"> </a> <a href="https://w.sf024.com/info/416196971.html" target="">做一个带左右箭头的图片切换效果,...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 04-17 </span><span> <i class="iconfont bx bx-show"></i> 80阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/416196962.html" title="做一个带箭头的图片切换的效果,只用javascript和css来实现" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="做一个带箭头的图片切换的效果,只用javascript和css来实现"> </a> <a href="https://w.sf024.com/info/416196962.html" target="">做一个带箭头的图片切换的效果,只...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 05-27 </span><span> <i class="iconfont bx bx-show"></i> 80阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/1447087478874962020.html" title="在ASP.NET 网页布局中,如何用 div 实现 左两行右一行的布局(如下图)" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="在ASP.NET 网页布局中,如何用 div 实现 左两行右一行的布局(如下图)"> </a> <a href="https://w.sf024.com/info/1447087478874962020.html" target="">在ASP.NET 网页布局中,如...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 08-14 </span><span> <i class="iconfont bx bx-show"></i> 74阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/1052195150548040339.html" title="网页中如何用js实现微信中的长按识别二维码的功能吗" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="网页中如何用js实现微信中的长按识别二维码的功能吗"> </a> <a href="https://w.sf024.com/info/1052195150548040339.html" target="">网页中如何用js实现微信中的长按...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 10-28 </span><span> <i class="iconfont bx bx-show"></i> 109阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/331392288.html" title="急用:网页设计:如何用JS实现:单击按钮就新打开一个的窗口,并设计该窗口的的长度和宽度" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="急用:网页设计:如何用JS实现:单击按钮就新打开一个的窗口,并设计该窗口的的长度和宽度"> </a> <a href="https://w.sf024.com/info/331392288.html" target="">急用:网页设计:如何用JS实现:...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 08-09 </span><span> <i class="iconfont bx bx-show"></i> 79阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/252984008.html" title="在网页制作是如何实现图片切换" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="在网页制作是如何实现图片切换"> </a> <a href="https://w.sf024.com/info/252984008.html" target="">在网页制作是如何实现图片切换...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 09-26 </span><span> <i class="iconfont bx bx-show"></i> 160阅读 </span> </p> </li> </ul> </div> </div> </div> </section><footer class="footer"> <div class="container"> <p class="copyright">COPYRIGHT 2013 - 2024 你问我答网®. ALL RIGHTS RESERVED. | <a href="https://beian.miit.gov.cn/" target="_blank">豫ICP备2020035127号</a></p> </div></footer><script> let search_type="1"; var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?752ceaa2e03e39366ceff9a414a1f6a7"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();</script> <script type="text/javascript" src="https://w.sf024.com/assets/js/jquery.share.min.js"></script> </body> </html>