<!DOCTYPE html><html><!-- 图片轮播的效果可以用bootstrap框架来实现，也可以自己直接写，这里采用了自己写的方式来实现--><head><meta charset="UTF-8" ...
<!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>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：图片轮播banner
关键词：图片
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
