html中在一个页面内实现多张图片的轮流播放 |
您所在的位置：网站首页 › 播放一个英语的照片 › html中在一个页面内实现多张图片的轮流播放 |
html中在一个页面内实现多张图片的轮流播放
|
实现图片轮转的代码如下： 轮播图 *{ margin:0; padding: 0; } .box{ width:1000px; height: 600px; border:1px solid red; margin:auto; margin-top:300px; background-repeat: no-repeat; background-size: cover; background-size: 100% 100%; } /*.box img{ width: 1000px; height: 600px; }*/ #pic{ width:1000px; height:520px; background-repeat: no-repeat; background-size: 100% 100%; } .btn{ width:120px; height:40px; margin-top: }
var pic=document.getElementById("pic");
var preBtn=document.getElementsByClassName("btn")[0];
var nextBtn=document.getElementsByClassName("btn")[1];
//
preBtn.onclick=function()
{
n--;
if(n==0)
{
n=6;
}
pic.src="imgs/"+n+".jpg"
}
nextBtn.onclick=function(){
picLunH();
}
var n=1;
function picLunH(){
n++;
if(n==7)
{
n=1;
}
pic.src="imgs/"+n+".jpg"
}
setInterval(picLunH,1000);
运行效果如下： |
在没有点击下一张和上一张按钮的时候图中的图片会在每隔一秒的时候进行自动的转换。点击上一张和下一张也可以实现图片的转换。 附录： 上述的代码中用到的图片如下。新建一个images，在其中放入任意的六张图片即可：
关于这个项目学习的过程中学到的知识点如下： A． func 函数名（）{}这个是在代码中定义函数 B． setInterval(函数名，时间)；定时器 C． *{ padding：0； margin：0； } 去除浏览器默认的边距，行间距 D.document.getElementById(); document.getElementByClass();两者的区别 就是class名字可以是重复的，如果重复了的换得到得就是一个数组，然后通过数组来调用元素。id是唯一的不能重复的，之后得到的对应的元素也是唯一的。【本文地址】