JavaScript实现图片切换

逃离我推掉我的手 2022-05-17 01:46 194阅读 0赞

实例代码如下：

1 JS 代码：

<script type="text/javascript">  
//页面加载后加载JS  
   window.οnlοad=function()\{  
       //获取文档元素  
       var pre=document.getElementById("btn1");  
       var nex=document.getElementById("btn2");  
       var img=document.getElementsByTagName("img")\[0\];  
       //创建图片的路径  
       var imgArr=\["img/1.jpg","img/2.jpg","img/3.jpg"\];  
       //创建变量保存当前图片的索引  
       var index=0;  
       var info=document.getElementById("info");  
       info.innerHTML="共 "+imgArr.length+" 张图，当前是第 "+(index+1)+" 张";  
       //修改src属性  
       pre.οnclick=function()\{  
           index--;  
           if(index<0)\{  
               index=imgArr.length-1;  
           \}  
           info.innerHTML="共 "+imgArr.length+" 张图，当前是第 "+(index+1)+" 张";  
           img.src=imgArr\[index\];  
       \};  
       nex.οnclick=function()\{  
           index++;  
           if(index==imgArr.length)\{  
               index=0;  
           \}  
           info.innerHTML="共 "+imgArr.length+" 张图，当前是第 "+(index+1)+" 张";  
           img.src=imgArr\[index\];  
       \};  
   \};  
</script>

2 HTML代码：

<div id="display">  
<p id="info"><p>  
<img src="img/1.jpg"></img>  
<button id="btn1">上一张</button>  
<button id="btn2">下一张</button>

</div>

3 CSS 代码：

<style type="text/css">  
    \*\{  
      margin:0;  
      padding:0;  
    \}  
    \#display\{  
       width:500px;  
       margin:50px auto;  
       padding:10px;  
       background-color:yellow;  
       text-align:center;  
    \}  
</style>

4 实现效果：

![70][]

点击可以实现切换。

当然，也可以设置定时函数实现轮播的效果。

[70]: /images/20220517/7969e510dfac4742848e590a2f5bc35f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，194人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript图片切换实现

![效果图][SouthEast] html代码 <div id="pic"> <img src="" alt="" />

绝地灬酷狼/ 2022年09月30日 15:59/ 0 赞/ 204 阅读

相关 js实现切换图片

描述：鼠标点击下一张，图片切换到下一张图片可替换 <style> body{ t

墨蓝/ 2022年09月11日 15:26/ 0 赞/ 172 阅读

相关 JQuery实现图片切换（自动切换+手动切换）

学习JS的时候本来积攒了很多有趣的小例子，但是苦于没有找到一些好的平台来展示这些JS效果。今天发现了RunJS这个分享代码的平台，迫不及待

ゝ一纸荒年。/ 2022年08月06日 14:15/ 0 赞/ 249 阅读

相关用JavaScript实现点击循环切换图片

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单击循环切换图片</title> <

忘是亡心i/ 2022年06月09日 09:57/ 0 赞/ 232 阅读

相关原生js(JavaScript)实现手动切换图片效果

手动切换图片只是实现了功能，并没有对页面样式做很好的优化。因为现在只是讲解这个图片切换的功能，没有必要花太多的时间和精力在界面优化上面。下面先把代码和样式图奉上再进行讲解。

曾经终败给现在/ 2022年05月20日 10:26/ 0 赞/ 228 阅读

相关 JavaScript实现图片切换

实例代码如下： 1 JS 代码： <script type="text/javascript"> //页面加载后加载JS window.οnlοad=func

逃离我推掉我的手/ 2022年05月17日 01:46/ 0 赞/ 195 阅读

相关 CSS3&JavaScript 图片分隔切换

![在这里插入图片描述][20181116173203280.gif] 这个切换效果在firebox上测试正常，但到了chrome上就没有切换效果了。原因可能是它们在处理t

柔情只为你懂/ 2022年04月16日 04:16/ 0 赞/ 114 阅读

相关利用JS实现图片切换

事件举例: 1.要求实现效果：当鼠标悬停在照片上时更换为另一张照片；当鼠标离开时，还原为本来的图片。说明： 1.一般来说对于一个事件问题处理起来分为三个步骤：

清疚/ 2022年04月15日 01:15/ 0 赞/ 701 阅读

相关 JavaScript 图片滑动切换效果

序一（08/07/06）看到alibaba的一个图片切换效果，感觉不错，想拿来用用。但代码一大堆的，看着昏，还是自己来吧。由于有了做图片滑动展示效果的经验，做

本是古典何须时尚/ 2022年04月14日 01:50/ 0 赞/ 261 阅读

相关 jquery实现图片切换

<div> <img class="imgclick" src="img/pic1.png" /> </div>

布满荆棘的人生/ 2021年09月19日 10:10/ 0 赞/ 412 阅读