1.首先在body标签內需要定义一张默认的图片
<img src="image/banner_1.jpg" id="qwe" />
2.首先定义一个变量代表图片名称
例如:a1=1;
3.接下来定义一个函数function run(){
a1++;//代表图片切换
if(a1>3){//判断是否已经到达最后一张图片
a1=1;//重置a1
}
document.getElementById("qwe").src="image/"+a1+".jpg";//更高图片为下一张
}
3.通过定时器来设置轮播效果
setInterVal(run,2000);//第一个参数代表要执行的函数,第二个代表毫秒;
4.如果需要左右按钮可以在body中设置
<input type="button" id="zdj" οnclick="z()" value="上一页"/>//代表上一页的按钮
对应的js函数:
function z(){
a1--;
if (a1<1){
a1=3;
}
document.getElementById("a1").src="image/banner_"+a1+".jpg";
}
5.右边按钮
body定义
<input type="button" id="ydj" οnclick="run()" value="下一页"/>
对应的js函数:
function run(){
a1++;
if (a1>3){
a1=1;
}
document.getElementById("a1").src="image/banner_"+a1+".jpg";
}
完整的代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<from >
<input type="button" id="zdj" οnclick="z()" value="上一页"/>
<img src="image/banner_1.jpg" id="a1" />
<input type="button" id="ydj" οnclick="run()" value="下一页"/>
</from >
</body>
</html>
<script>
a1=1;
function z(){
a1--;
if (a1<1){
a1=3;
}
document.getElementById("a1").src="image/banner_"+a1+".jpg";
}
function run(){
a1++;
if (a1>3){
a1=1;
}
document.getElementById("a1").src="image/banner_"+a1+".jpg";
}
setInterval(run,2000);
</script>
3293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
