图片轮播banner
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片轮播banner相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<!-- 图片轮播的效果可以用bootstrap框架来实现，也可以自己直接写，这里采用了自己写的方式来实现-->
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
body{text-align : center}
div{margin : 100px auto; width : 790px; positision : relative}
.an{positision : absolute; right : 200px; bottom : 50px ;height :0px}
.an a{text-decoration : none; padding : 2px 5px;background-color : #F00}
</style>
<body>
<div>
<!-- 选择轮播显示的图片，通过display属性来选择图片的隐藏或者显示-->
<img src = "images/banner1.jpg" id = "1" width = "790px" height = "340px" style = "display : block">
<img src = "images/banner2.jpg" id = "2" width = "790px" height = "340px" style = "display : none">
<img src = "images/banner3.jpg" id = "3" width = "790px" height = "340px" style = "display : none">
<img src = "images/banner4.jpg" id = "4" width = "790px" height = "340px" style = "display : none">
<!-- 做右下角的1234小标签-->
<div class = "an">
<a href = "" onclick = "change(1)">1</a>
<a href = "" onclick = "change(2)">2</a>
<a href = "" onclick = "change(3)">3</a>
<a href = "" onclick = "change(4)">4</a>
</div>
</div>
<script type = "text/javascript">
//num记录当前显示的图片id
var num = 1;
var flag;
function change(n){
//isNaN(n) 判断n是否是数字,若是数字，改变number
if(!isNaN(Number(n))){
num = n;
//清空计时器
window.clearTimeout(flag);
}
//获取所有图片标签，通过改变display控制图片显示与隐藏，实现轮播效果
var images = document.getElementsByTagName("img");
for(i = 0;i < images.length;i++){
if(images[i].id == num){
images[i].style.display = "block"
}else{
images[i].style.display = "none";
}
}
if(num == 4){
num = 1;
}else{
num++;
}
//设置计时器自动执行方法，实现循环
flag = window.setTimeout("change()",1000);
}
change();
</script>
</body>
</html>
以上是关于图片轮播banner的主要内容，如果未能解决你的问题，请参考以下文章
Android----------- Banner2 广告图片轮播ViewPager2实现