脚本宝典收集整理的这篇文章主要介绍了js实例教程-JavaScript学习案例之手动切换轮播图片，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

                 <p ">   <span style="whITe-space:PRe;">         </span><input tyPE="button" value="手动切换" onclick="changeimg()" />   <span style="white-space:pre;">         </span><img src="img/1.jpg" width="100%" id="img1"/>   <span style="white-space:pre;">     </span></p>  

 <style type="text/css">           p{               width: 500px;               height: 350px;               border: 1px solid white;               margin: auto;               text-align: center;           }       </style>  

 <script type="text/javascript">           VAR i = 0;           function changeImg(){               i++;               document.getElementById("img1").src="img/"+i+".jpg"               if(i==5){                   i=0;               }           }   </script>  

JavaScript学习案例之手动切换轮播图片

效果图：

思路：

1.先做界面

1.1制作按钮及点击触发事件

1.2引入一张图片

2.书写Css

2.1跳转p盒子的布局（宽、高、边框线、水平居中、文字居中...）

3.JavaScript

3.1 定义一个变量 i 即原图的数字名称

3.2定义函数：将变量i进行自增。

3.3通过id获取图片元素所在位置，并在后面输出图片路径及图片名称i 的变量

3.4判断：当图片到达最后一张，将图片变量重置为0，进行循环递加到原图的图片名称1上去

参考代码：

Html代码

                 <p ">   <span style="white-space:pre;">         </span><input type="button" value="手动切换" onclick="changeImg()" />   <span style="white-space:pre;">         </span><img src="img/1.jpg" width="100%" id="img1"/>   <span style="white-space:pre;">     </span></p>  

CSS代码：

 <style type="text/css">           p{               width: 500px;               height: 350px;               border: 1px solid white;               margin: auto;               text-align: center;           }       </style>  

JavaScript代码

 <script type="text/javascript">           var i = 0;           function changeImg(){               i++;               document.getElementById("img1").src="img/"+i+".jpg"               if(i==5){                   i=0;               }           }   </script>  

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-JavaScript学习案例之手动切换轮播图片全部内容，希望文章能够帮你解决js实例教程-JavaScript学习案例之手动切换轮播图片所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。