您的位置：首页 > Web前端 > JavaScript

JavaScript实现网页轮播，简单有效

2019-01-21 21:01 274 查看

先说一下需要的知识 setinterval函数，明白document. getelementsById是什么意思。

轮播呈现方式多种多样，鄙人在这里给出一个比较low的方法，若有大神指教，不甚感激！

思路：

1、在body里面设置一个img标签，src路径暂且不设置，并给img标签设置id。

2、写一个function函数，里面设置src随着某种变量而改变的条件。

下面撸代码！！！

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<img id = "image"/>

<script >

function $(id){

return document.getElementById(id);

}

var index=1;

function setSrc(){

$("image").src="./img/"+index+".png";

++index;

if(index==3){

index=1;

}

}

setSrc();

setInterval("setSrc()",500);

</script>

</body>

</html>

在这里我采用了投机取巧的方式，我的图片名都是：

读者可以按照需要改变一下函数的结构

“自己整理了一份最全面前端学习资料,从最基础的HTML+CSS+JS [炫酷特效，游戏，插件封装，设计模式]到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴, 有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。”

加Q 裙：956940552（招募中）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航