<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HOME</title>
<style>
.div1 {
float: left
padding: 5px
display: inline-block
border-radius: 50%
line-height: 0
}
.div1.active {
background-color: #ddddddb8
}
.div2 {
height: 10px
width: 10px
border-radius: 50%
border: 2px solid #dddddda6
display: inline-block
}
.div1.active .div2{
border: 2px solid transparent
background-color: #fff
}
</style>
</head>
<body class="non-google-page inited" style="background: rgb(67, 77, 193)">
<div class="div1 active" id='d1'>
<div></div>
</div>
<div id='d2'>
<div></div>
</div>
<div id='d3'>
<div></div>
</div>
<div id='d4'>
<div></div>
</div>
<div id='d5'>
<div></div>
</div>
</body>
<script>
setInterval(function(){
var active = document.getElementsByClassName("active")[0]
active.classList.remove('active')
var id = parseInt(active.id.replace('d',''))
if(id<5){
id++
}else{
id=1
}
document.getElementById("d"+id).classList.add('active')
}, 1200)
</script>
</html>
轮播图是每个网站中必不可少的元素，那么如何用JS制作轮播图呢？下面我就给大家分享一下。
工具/材料Sublime Text
01首先需要在Sublime中创建HTML文档，然后在文档的body区域中加入如下图所示的轮播图内容
02然后我们需要在style标签中给所添加的轮播图内容声明样式，如下图所示
03接下来我们就需要在script标签中实现轮播图的动画脚本内容了，如下图所示，注意script标签的type类型一定要是javascript
04最后我们运行界面程序，你就会看到如下图所示的轮播图了，点击左右的箭头和中间的圆点都可以进行轮播图的切换
工具/材料Sublime Text
01首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示
02然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头
03接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明
04最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能
05最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图
