1.用浏览器看时，有时图片无法从最后一张图片切换到第一张，但有时图片又正常切换了；我用chrome和火狐都出现这种现象；有时当图片正常切换了，打开开发者工具时，立马切换不了。。。
2.代码如下：
3.这是HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../../阿里图标库/iconfont.css">
<link rel="stylesheet" href="轮播图.css">
<script src="../../外部文件/jquery-1.10.2/jquery.js"></script>
<script src="轮播图.js"></script>
</head>
<body>
<div class="box1">
<div class="box11" style="left: -600px">
<img src="../../外部图片/banner5.webp" alt="5">
<img src="../../外部图片/banner1.webp" alt="1">
<img src="../../外部图片/banner2.webp" alt="2">
<img src="../../外部图片/banner3.webp" alt="3">
<img src="../../外部图片/banner4.webp" alt="4">
<img src="../../外部图片/banner5.webp" alt="5">
<img src="../../外部图片/banner1.webp" alt="1">
</div>
<div class="box12">
<span class="s"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<span id="left" class="iconfont left-right"></span>
<span id="right" class="iconfont left-right"></span>
</div>
</body>
</html>4.这是CSS代码
* {
padding: 0;
margin: 0;
}
.box1 {
position: relative;
width: 600px;
height: 400px;
margin: 20px auto;
overflow: hidden;
}
.box11 {
position: absolute;
width: 4200px;
height: 400px;
}
img {
width: 600px;
height: 400px;
float: left;
}
.box12 {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
margin: 0 auto;
width: 130px;
height: 20px;
z-index: 1;
opacity: 0.7;
display: flex;
justify-content: space-between;
}
.box12 span {
cursor: pointer;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: whitesmoke;
}
.box12 span.s {
background-color: tomato;
}
.left-right {
cursor: pointer;
display: none;
position: absolute;
width: 40px;
height: 40px;
background-color: RGBA(0, 0, 0, 0.3);
z-index: 2;
top: 0;
bottom: 0;
margin: auto 0;
text-align: center;
line-height: 40px;
font-weight: bold;
font-size: 30px;
color: #fff;
}
#left {
left: 20px;
}
#right {
right: 20px;
}
.box1:hover .left-right {
display: block;
}
.left-right:hover {
background-color: RGBA(0, 0, 0, 0.7);
}
5.这是js代码
$(function () {
var $box1 = $(".box1");
var $box11 = $(".box11");
var $box11span = $(".box11>span");
var $box12 = $(".box12");
var $box12span = $(".box12>span");
var $left = $("#left");
var $right = $("#right");
//起始
var index = 0;
var ifpage=false;
var outsetInterval = setInterval(function () {
pageturn(true);
}, 3000);
$box11.hover(function () {
clearInterval(outsetInterval);
}, function () {
outsetInterval = setInterval(function () {
pageturn(true);
}, 3000);
});
$left.click(function () {
pageturn(false);
});
$right.click(function () {
pageturn(true);
});
//点击圆点
$box12span.click(function () {
//目标索引值
var targetIndex = $(this).index();
//如果点击的圆点不是同一个，
if (index !== targetIndex) {
//则调用移动函数
pageturn(targetIndex);
}
});
//更新圆点
function switchdot(next) {
//定义下一次圆点
var nextdot = 0;
//如果是翻页操作
if (typeof next === "boolean") {
//当向右翻页时
if (next) {
//下一次圆点索引值
nextdot = index + 1;
if (nextdot === 5) {
nextdot = 0;
}
//当向左翻页时
} else {
//下一次圆点索引值
nextdot = index - 1;
if (nextdot === -1) {
nextdot = 4;
}
}
//如果是点击圆点操作
} else {
nextdot = next;
}
$box12span.eq(index).removeClass("s");
$box12span.eq(nextdot).addClass("s");
//更新
index = nextdot;
}
//定义翻页的函数
function pageturn(next) {
if(ifpage){
return;
}
ifpage=true;
//totaldistance表示移动的总距离
//之所以要写var totaldistance = 0;，是因为下面判断，然后要赋值不同的offset
var totaldistance = 0;
if (typeof next === "boolean") {
totaldistance = next ? -600 : 600;
} else {
totaldistance = -(next - index) * 600;
}
//移动前的位置
var startpositon = $box11.position().left;
//移动后的位置
var finalposition = startpositon + totaldistance;
//每次移动的距离
var unitdistance = totaldistance / 20;
//切换图片之前就切换圆点
switchdot(next);
//设置定时器
var timer = setInterval(function () {
startpositon += unitdistance;
//如果到达目标位置
if (startpositon === finalposition) {
if (startpositon === -3600) {
startpositon = -600;
} else if (startpositon === 0) {
startpositon = -3000;
}
clearInterval(timer);
ifpage=false;
}
$box11.css("left", startpositon);
}, 20);
}
});
下次发个附件源码😂
<script>
$(function () {
var $box1 = $(".box1");
var $box11 = $(".box11");
var $box11span = $(".box11>span");
var $box12 = $(".box12");
var $box12span = $(".box12>span");
var $left = $("#left");
var $right = $("#right");
//起始
var index = 0;
var ifpage = false;
var outsetInterval = setInterval(function () {
pageturn(true);
}, 3000);
$box11.hover(function () {
clearInterval(outsetInterval);
}, function () {
outsetInterval = setInterval(function () {
pageturn(true);
}, 3000);
});
$left.click(function () {
pageturn(false);
});
$right.click(function () {
pageturn(true);
});
//点击圆点
$box12span.click(function () {
//目标索引值
var targetIndex = $(this).index();
//如果点击的圆点不是同一个，
if (index !== targetIndex) {
//则调用移动函数
pageturn(targetIndex);
}
});
//更新圆点
function switchdot(next) {
//定义下一次圆点
var nextdot = 0;
//如果是翻页操作
if (typeof next === "boolean") {
//当向右翻页时
if (next) {
//下一次圆点索引值
console.log(index);
nextdot = index + 1;
if (nextdot === 5) {
nextdot = 0;
}
//当向左翻页时
} else {
//下一次圆点索引值
nextdot = index - 1;
if (nextdot === -1) {
nextdot = 4;
}
}
//如果是点击圆点操作
} else {
nextdot = next;
}
$box12span.eq(index).removeClass("s");
$box12span.eq(nextdot).addClass("s");
//更新
index = nextdot;
}
//定义翻页的函数
function pageturn(next) {
if (ifpage) {
return;
}
ifpage = true;
//totaldistance表示移动的总距离
//之所以要写var totaldistance = 0;，是因为下面判断，然后要赋值不同的offset
var totaldistance = 0;
if (typeof next === "boolean") {
totaldistance = next ? -600 : 600;
} else {
totaldistance = -(next - index) * 600;
}
//移动前的位置
var startpositon = $box11.position().left;
//移动后的位置
var finalposition = startpositon + totaldistance;
//每次移动的距离
var unitdistance = totaldistance / 20;
//切换图片之前就切换圆点
switchdot(next);
//设置定时器
var timer = setInterval(function () {
startpositon += unitdistance;
//如果到达目标位置
if (startpositon === finalposition) {
if (startpositon === -3000) {
startpositon = 0;
} else if (startpositon === 0) {
startpositon = -3000;
}
clearInterval(timer);
ifpage = false;
}
$box11.css("left", startpositon);
}, 20);
}
});
</script>在你基础上修改后的代码