javascript - 图片自动轮播+左右点击+圆点，手动切换后图片自动轮播就乱套了怎么改？
本文介绍了javascript - 图片自动轮播+左右点击+圆点，手动切换后图片自动轮播就乱套了怎么改？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="font-awesome-4.6.3/css/font-awesome.css">
<style type="text/css">
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;}
</style>
</head>
<body>
<div class="container1" id="carousel">
<a href="#" id="oleft"><i class="fa fa-angle-left"></i></a>
<a href="#" id="oright"><i class="fa fa-angle-right"></i></a>
<div class="ui-page-item">
<span class="ui-page-link"></span>
<span class="ui-page-link"></span>
<span class="ui-page-link"></span>
<span class="ui-page-link"></span>
<span class="ui-page-link"></span>
</div>
<div id="lunbo">
<a href="#">
<img src="http://i3.mifile.cn/a4/3d43e725-326f-43e1-a373-c49eabf52b21http://i3.mifile.cn/a4/3d43e725-326f-43e1-a373-c49eabf52b21">
</a>
</div>
</div>
<script>
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;
//定時器
function autoPlay() {
var timer = setInterval(function(){
num++;
num%= arrUrl.length;
fnTab();
},3000);
}
// 有用戶來操作的定時器，開啟之前一定要先關
setTimeout(autoPlay,1000);
oCar.onmouseover = function(){
clearTimeout(timer);
}
oCar.onmouseout = autoPlay;
// 初始化
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();
}
</script>
</body>
</html>解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="font-awesome-4.6.3/css/font-awesome.css">
<style type="text/css">
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;
}
</style>
</head>
<body>
<div class="container1" id="carousel">
<a href="#" id="oleft"><i class="fa fa-angle-left"></i></a>
<a href="#" id="oright"><i class="fa fa-angle-right"></i></a>
<div class="ui-page-item">
<span class="ui-page-link"></span>
<span class="ui-page-link"></span>
<span class="ui-page-link"></span>
<span class="ui-page-link"></span>
<span class="ui-page-link"></span>
</div>
<div id="lunbo">
<a href="#">
<img src="http://i3.mifile.cn/a4/3d43e725-326f-43e1-a373-c49eabf52b21http://i3.mifile.cn/a4/3d43e725-326f-43e1-a373-c49eabf52b21">
</a>
</div>
</div>
<script>
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();
}
</script>
</body>
</html>clearInterval才行 clearTimeout没用，都是细节问题，注意下就好
这篇关于javascript - 图片自动轮播+左右点击+圆点，手动切换后图片自动轮播就乱套了怎么改？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
