代码:
<body onload="changeImg()">
<div class="main">
<div class="container">
<ul class="img">
<li>
<img src="./img/banner1.jpg" alt="" id="img">
</li>
</ul>
<ul id="round">
</ul>
</div>
</div>
</body>
<script>
var arr=['./img/banner1.jpg','./img/banner2.jpg','./img/banner3.jpg'];
var str='';
var index=0;
//轮播图
function changeImg() {
setInterval(function () {
index++;
if(index==arr.length){
index=0;
}
document.getElementById('img').src=arr[index];
//调用clickRound方法使小圆点跟着图片的改变而改变状态
clickRound(index);
},2000);
round();
}
//生成小圆点
function round() {
for(var i=0;i<arr.length;i++){
str+=`<li class="radius" onclick="clickRound(${i})" ></li>`
}
document.getElementById('round').innerHTML=str;
roundPosition();
//小圆点的默认状态
clickRound(0);
}
//点击小圆点的状态
function clickRound(i) {
var li=document.getElementById('round').children;
for(var j=0;j<li.length;j++){
if(li[j].id=='active'){
li[j].id='radius'
}
li[i].id='active'
}
document.getElementById('img').src=arr[i];
}
//小圆点的位置
function roundPosition() {
var w=0;
var ul=document.getElementById('round');
var li=document.getElementById('round').children;
for(var j=0;j<li.length;j++){
w+=li[j].scrollWidth;//所有小圆点的宽的和
}
var y=(ul.scrollWidth-w)/2;//计算小圆点居中时,padding-left的值
ul.style.paddingLeft=y+'px';
}
</script>
</html>
效果图: