如何解决分页点击切换和自动切换问题 1、在自动轮播到最后一张时无法回到第一个（及分页块有这个问题）。 2、如何实现点击分页时切换至对应图片红点也同时到对应的白点中。
如何解决分页点击切换和自动切换问题
1、在自动轮播到最后一张时无法回到第一个（及分页块有这个问题）。
2、如何实现点击分页时切换至对应图片红点也同时到对应的白点中。
<!DOCTYPE html>
<html lang="zh-CN">
<meta charset="UTF-8">
<meta http-equiv="X-UA" content="IE-10,chrome=1">
<title>测试</title>
<style>
.main::after,
.main::before {
display: table;
content: '';
}
.main::after {
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
.main .main-Carousel {
margin-top: 10px;
float: left;
width: 564px;
border-radius: 0 18px 0 0;
}
.main .main-Carousel .site-Carousel-box {
position: relative;
left: 0;
width: 564px;
height: 315px;
border-radius: 12px;
background-color: #fff;
overflow: hidden;
}
.main .main-Carousel .Carousel-box {
position: relative;
left: 0;
width: 564px;
height: 315px;
border-radius: 12px;
background-color: #fff;
overflow: hidden;
}
.main-Carousel .Carousel-box .Carousel-site {
position: absolute;
left: 0;
width: 3948px;
height: 315px;
}
.main-Carousel .Carousel-box .Carousel-site .Carousel-image {
width: 564px;
height: 315px;
float: left;
overflow: hidden;
}
.main-Carousel .Carousel-box .Carousel-site .Carousel-image .link {
display: inline-block;
width: 564px;
height: 315px;
cursor: pointer;
}
.main-Carousel .Carousel-box .Carousel-site .Carousel-image .link img {
width: 564px;
height: 315px;
border-radius: 12px;
}
.main .main-Carousel .site-Carousel-box .switch-button-box {
min-height: 0;
}
.main .main-Carousel .site-Carousel-box .switch-button-box .switch-opt a {
position: absolute;
top: 50%;
background-color: rgba(0, 0, 0, .2);
}
.switch-opt a,
.switch-opt i {
display: block;
width: 20px;
height: 30px;
font-size: 14px;
line-height: 30px;
color: #fff;
overflow: hidden;
}
.main .main-Carousel .site-Carousel-box .switch-button-box .switch-opt .button-left {
left: 0;
}
.button-left .left-sign {
margin-right: 6px;
}
.main .main-Carousel .site-Carousel-box .switch-button-box .switch-opt .button-left {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
-moz-border-top-right-radius: 15px;
-moz-border-bottom-right-radius: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
}
.main .main-Carousel .site-Carousel-box .switch-button-box .switch-opt .button-right {
right: 0;
}
.button-right .right-sign {
margin-left: 5px;
}
.main .main-Carousel .site-Carousel-box .switch-button-box .switch-opt .button-right {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
-moz-border-top-left-radius: 15px;
-moz-border-bottom-left-radius: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
}
.main .site-Carousel-box .switch-button-box .switch-dot{
position: absolute;
bottom: 15px;
left: 50%;
padding: 0 1px 0 1px;
margin-left: -40px;
background-color: rgba(255, 255, 255, .2);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
overflow: hidden;
}
.switch-button-box .switch-dot{
text-align: center;
font-size: 0;
}
.main .site-Carousel-box .switch-button-box .switch-dot li{
display: inline-block;
margin: 3px;
}
.main .site-Carousel-box .switch-button-box .switch-dot li a{
display: block;
float: left;
width: 8px;
height: 0;
padding-top: 8px;
border-radius: 4px;
background-color: #fff;
}
.main .site-Carousel-box .switch-button-box .switch-dot .dot a{
background-color: #ff5000;
}
</style>
<script>
function Carousel() {
var m = document.querySelector('.Carousel-box');
var s = m.children[0];
var w = m.offsetWidth;
var l = document.querySelector('.button-left');
var r = document.querySelector('.button-right');
var b = document.querySelector('.switch-button-box');
var n = b.children[0];
var d = b.children[1];
s.insertBefore(s.children[4].cloneNode(true), s.children[0]);
s.appendChild(s.children[1].cloneNode(true));
var index = 0;
var timer;
var goleft = function () {
if (index >= 0) {
index = 5;
var t = -564 + -index * w;
s.style.transitionDuration = '0s';
s.style.transform = 'translate3d(' + t + 'px' + ',' + 0 + 'px' + ',' + 0 + 'px)';
setTimeout(() => {
index = 4;
chart();
}, 0);
} else if (index < 0) {
index = 4;
chart();
};
};
var goRight = function () {
if (index >= 5) {
index = 0;
var t = -564 + -index * w;
s.style.transitionDuration = '0s';
s.style.transform = 'translate3d(' + t + 'px' + ',' + 0 + 'px' + ',' + 0 + 'px)';
setTimeout(() => {
index = 1;
chart();
}, 0);
} else if (index < 0) {
index = 4;
chart();
};
};
goRight();
var firing = function () {
timer = setInterval(() => {
if (index >= 5) {
goRight();
} else {
index++;
chart();
};
}, 3000);
}
firing();
function open() {
clearInterval(timer);
};
function close() {
firing();
};
m.onmouseover = open;
m.onmouseout = close;
l.onmouseover = open;
l.onmouseout = close;
r.onmouseover = open;
r.onmouseout = close;
l.onclick = function () {
if (index == 0) {
goleft();
} else {
index--;
chart();
};
dot();
};
r.onclick = function () {
if (index == 5) {
goRight();
} else {
index++;
chart();
};
dot();
};
function chart() {
var t = -564 + -index * w;
s.style.transitionDuration = '0.2s';
s.style.transform = 'translate3d(' + t + 'px' + ',' + 0 + 'px' + ',' + 0 + 'px)';
};
function dot() {
d.querySelector('.dot').classList.remove('dot');
d.children[index].classList.add('dot');
};
};
</script>
<body>
<div class="main">
<div class="main-Carousel">
<div class="site-Carousel-box">
<div class="Carousel-box">
<div class="Carousel-site"
style="left: 0;transform: translate3d(-564px, 0px , 0px); transition-duration: 0.2s;">
<div class="Carousel-image" data-image="1">
<a href="" class="link">
<img src="./image/O1CN011Azqv328QcReHT5kF_!!6000000007927-0-octopus.jpg" alt="">
</a>
</div>
<div class="Carousel-image" data-image="2">
<a href="" class="link">
<img src="./image/O1CN018Ms4l41vbzGuL3JOk_!!6000000006192-0-octopus.jpg" alt="">
</a>
</div>
<div class="Carousel-image" data-image="3">
<a href="" class="link">
<img src="./image/O1CN01a71ilU1T2RCTvUXDY_!!6000000002324-0-tps-846-472.jpg" alt="">
</a>
</div>
<div class="Carousel-image" data-image="4">
<a href="" class="link">
<img src="./image/O1CN01RbnhFd1wBFigMUNYq_!!6000000006269-2-tps-846-472.png" alt="">
</a>
</div>
<div class="Carousel-image" data-image="5">
<a href="" class="link">
<img src="./image/O1CN01Sf6dER1zbJ3uVQ0lE_!!6000000006732-0-tps-846-472.jpg" alt="">
</a>
</div>
</div>
</div>
<div class="switch-button-box">
<div class="switch-opt">
<a href="javaScript:;" class="button-left">
<i class="left-sign iconfont"></i>
</a>
<a href="javaScript:;" class="button-right">
<i class="right-sign iconfont"></i>
</a>
</div>
<ul class="switch-dot">
<li class="dot">
<a href="javaScript:void(0);" data-index="1"></a>
</li>
<li class="">
<a href="javaScript:void(0);" data-index="2"></a>
</li>
<li class="">
<a href="javaScript:void(0);" data-index="3"></a>
</li>
<li class="">
<a href="javaScript:void(0);" data-index="4"></a>
</li>
<li class="">
<a href="javaScript:void(0);" data-index="5"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
给你的图片 和 小点 多加一个就好了，改成6张图，6个小圆点。代码是写死的数量，有点乱懒得改了，推荐你用swiper写轮播
js实现原生轮播图参考 https://www.cnblogs.com/zhuzhenwei918/p/6416880.html
- 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7551961
- 这篇博客也不错, 你可以看下微信小程序·实现列表页和详情页同步收藏
- 除此之外, 这篇博客: 小程序云开发笔记：判断用户权限，不同权限用户看到不同内容中的 如何让不同权限用户看到不同内容 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
我们在上面已经得到，管理员的 authority 值为 true，所以我们利用这个值进行判断即可。
比如在 wxml 中我想让一个 button 只有管理员能看见，那么我们用
wx:if = '{{authority}}'判断一下用户身份即可。代码示例：
<button wx:if = '{{authority}}'>只有管理员才能看到这个按钮</button>这样只有 authority 值为 true 的人这个按钮才会被显示出来，组件的功能也自然普通用户用不了了。其他组件同理，当然你也可以把权限更加细分，原理是一样的。
- 您还可以看一下 CSDN讲师老师的从单机到分布式，数据库服务的演变史课程中的 从单机到分布式，数据库服务的演变史-上小节, 巩固相关知识点
- 以下回答由chatgpt基于相关博客总结生成:
答案:
很抱歉，根据问题描述和参考资料，我无法理解具体的技术问题或需要解决的具体情况。需要更具体的上下文信息和描述，以便我能够提供更有针对性的解决方案或实现想法。请提供更多的信息和上下文，谢谢！