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

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>