html5怎么点圆点切换图片,图片自动轮播+左右点击+圆点，手动切换后图片自动轮播就乱套了怎么改？...

test

body {

background: #f1f1f1;

}

a {

text-decoration: none;

}

img {

width: 320px;

height: 320px;

}

.container1 {

width: 320px;

height: 320px;

overflow: hidden;

margin: 100px auto;

position: relative;

}

.container1>a {

width: 20px;

height: 30px;

line-height: 30px;

position: absolute;

left: 0;

top: 150px;

color: rgba(0, 0, 0, 0.3);

font-size: 30px;

text-align: center;

}

.container1>a:nth-child(2) {

position: absolute;

left: 300px;

}

.container1>a:hover {

background: rgba(0, 0, 0, 0.3);

color: #fff;

}

.container1 .ui-page-item {

width: 100px;

height: 10px;

position: absolute;

bottom: 10px;

right: 20px;

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: flex-end;

}

.container1 .ui-page-item span {

width: 5px;

height: 5px;

border: 2px solid rgba(255, 255, 255, 0.3);

background: rgba(0, 0, 0, 0.4);

border-radius: 50%;

transition: 0.2s;

}

.container1 .ui-page-item span:hover {

background: rgba(255, 255, 255, 0.4);

border-color: rgba(0, 0, 0, 0.4);

}

.active {

color: #fff10a;

font-size: 32px;

font-weight: 700;

}

var oCar = document.getElementById('carousel');

var oLeft = document.getElementById('oleft');

var oRight = document.getElementById('oright');

var oImg = document.getElementsByTagName('img')[0];

var arrUrl = ['http://i3.mifile.cn/a4/3d43e725-326f-43e1-a373-c49eabf52b21', 'http://i3.mifile.cn/a4/73af3040-727c-4b5d-846f-6e0d60db86a1', 'http://i3.mifile.cn/a4/fd65a053-4b78-4159-a866-72d51f63900c', 'http://i3.mifile.cn/a4/2bffe653-bd4f-44b1-8332-8fac13f2d66e', 'http://i3.mifile.cn/a4/5ee09922-333b-40cd-bf40-792d743419fa'];

var aSpan = document.getElementsByTagName('span');

var num = 0;

//定時器

var timer = setInterval(function() {

num++;

num %= arrUrl.length;

fnTab();

}, 3000);

// 有用戶來操作的定時器，開啟之前一定要先關

oCar.onmouseover = function() {

clearInterval(timer);

}

oCar.onmouseout = function() {

timer = setInterval(function() {

num++;

num %= arrUrl.length;

fnTab();

}, 3000);

};

// 初始化

function fnTab() {

oImg.src = arrUrl[num];

for(var i = 0; i < aSpan.length; i++) {

aSpan[i].className = '';

}

aSpan[num].className = 'active';

}

fnTab();

//鼠標放上去顯示本塊內容

for(var i = 0; i < aSpan.length; i++) {

aSpan[i].index = i;

// 索引值

aSpan[i].onmouseover = function() {

num = this.index;

fnTab();

}

}

// 左右轮播点击事件

oLeft.onclick = function() {

num--;

if(num == -1) {

num = arrUrl.length - 1

}

fnTab();

}

oRight.onclick = function() {

num++

if(num == arrUrl.length) {

num = 0

}

fnTab();

}

clearInterval才行 clearTimeout没用，都是细节问题，注意下就好