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

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

效果图：

思路：

1.先做界面

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

1.2引入一张图片

2.书写css

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

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

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

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

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

参考代码：

html代码

css代码：

p{

width: 500px;

height: 350px;

border: 1px solid white;

margin: auto;

text-align: center;

}

javascript代码

var i = 0;

function changeimg(){

i++;

document.getelementbyid("img1").src="img/"+i+".jpg"

if(i==5){

i=0;

}

}

希望与广大网友互动？？

点此进行留言吧！