想通过点击状态栏也能实现切换图片的效果，那个li标签点击就切换到那张图，红点也跟着变化
想通过点击状态栏也能实现切换图片的效果，那个li标签点击就切换到那张图，红点也跟着变化
html>
<html>
<head>
<title>测试title>
head>
<style>
#RotationChartModule{
width: 564px;
height: 315px;
margin-top: 10px;
position: relative;
}
.PictureRotation{
width: 564px;
height: 315px;
position: relative;
border-radius: 10px;
overflow: hidden;
}
.tation_imgBox{
position: absolute;
transition-duration: 1s;
}
.tation_img{
position: relative;
}
.tation_img img{
width: 564px;
height: 315px;
display: block;
border-radius: 10px;
opacity: 1;
}
.tation_img.active{
z-index: 10;
opacity: 1;
}
.RotationDot_Dot{
position: absolute;
left: 244px;
width: auto;
height: 9px;
z-index: 13;
top: 280px;
padding: 3px 5px;
background-color: rgba(255, 255, 255, .3);
border-radius: 50px;
}
.rotation_Dot{
width: 9px;
height: 9px;
background-color: #fff;
float: left;
margin: 0 2px;
border-radius: 50px;
cursor: pointer;
list-style-type: none;
}
.rotation_Dot.active{
background-color: #ff5000;
}
.leftButton{
width: 20px;
height: 30px;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;
background-color: rgba(40, 38, 38, 0.2);
position: absolute;
top: 128px;
left: 0;
z-index: 40;
border: none;
}
.leftButton:hover{
background-color: rgba(40, 38, 38, 0.5);
}
.leftIcon{
line-height: 30px;
font-size: 12px;
color: #fff;
font-weight: 900;
font-style: normal;
position: absolute;
left: 2px;
top: 0px;
}
.rightButton{
width: 20px;
height: 30px;
border-bottom-left-radius: 50px;
border-top-left-radius: 50px;
background-color: rgba(40, 38, 38, 0.2);
position: absolute;
top: 128px;
right: 0;
z-index: 40;
border: none;
}
.rightButton:hover{
background-color: rgba(40, 38, 38, 0.5);
}
.rightIcon{
line-height: 30px;
font-size: 12px;
color: #fff;
font-weight: 900;
font-style: normal;
position: absolute;
right: 1px;
top: 0;
}
style>
<body>
<div id="RotationChartModule">
<div class="PictureRotation">
<div id="tation_imgBox" style="width: 2840px;transform: translateX(0px);overflow:hidden;position: absolute;backface-visibility:hidden;">
<div class="tation_img" style="float:left;width:564px;" data-rotaion="0"><a href=""><img src="../html/imge/O1CN011yBJBI1FtCEaHaebh_!!6000000000544-2-octopus.png" alt="">a>div>
<div class="tation_img" style="float:left;width:564px;" data-rotaion="1"><a href=""><img src="../html/imge/O1CN013jhNY51VGkqFZezAz_!!6000000002626-0-octopus.jpg" alt="">a>div>
<div class="tation_img" style="float:left;width:564px;" data-rotaion="2"><a href=""><img src="../html/imge/O1CN01uFc5A720osRJbUXo9_!!6000000006897-2-octopus.png" alt="">a>div>
<div class="tation_img" style="float:left;width:564px;" data-rotaion="3"><a href=""><img src="../html/imge/O1CN01q68omo1PFU3CIDAub_!!6000000001811-2-octopus.png" alt="">a>div>
<div class="tation_img" style="float:left;width:564px;" data-rotaion="4"><a href=""><img src="../html/imge/O1CN01VCxO9H1ujwTZEUBOU_!!6000000006074-0-octopus.jpg" alt="">a>div>
div>
<ul class="RotationDot_Dot">
<li class="rotation_Dot active" data-tation="0">li>
<li class="rotation_Dot" data-tation="1">li>
<li class="rotation_Dot" data-tation="2">li>
<li class="rotation_Dot" data-tation="3">li>
<li class="rotation_Dot" data-tation="4">li>
ul>
<div class="btn" style="visibility:hidden;">
<button class="leftButton"><i class="leftIcon">◄i>button>
<button class="rightButton"><i class="rightIcon">►i>button>
div>
div>
div>
body>
<script>
window.onload = function(){
var PictureRotation = document.querySelector('.PictureRotation');
var leftButton = document.getElementsByClassName('leftButton')[0];
var rightButton = document.getElementsByClassName('rightButton')[0];
var tation_imgBox = PictureRotation.children[0];
var width = PictureRotation.offsetWidth;
var RotationDot_Dot = PictureRotation.children[1];
var btn = document.getElementsByClassName('btn')[0];
var index = 0;
var timer = setInterval(function(){
index++;
var translatex = -index * width;
tation_imgBox.style.transition = 'all 0.3s';
tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
},3000);
tation_imgBox.addEventListener('transitionend',function(){
if(index >= 5){
index = 0;
tation_imgBox.style.transition = 'none';
var translatex = -index * width;
tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
}else if(index < 0){
index = 4;
tation_imgBox.style.transition = 'none';
var translatex = -index *width;
tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
}
RotationDot_Dot.querySelector('.active').classList.remove('active');
RotationDot_Dot.children[index].classList.add('active');
});
PictureRotation.onmouseover = function(){
btn.style.visibility = 'visible';
clearInterval(timer);
};
PictureRotation.onmouseout = function(){
btn.style.visibility = 'hidden';
timer = setInterval(function(){
index++;
var translatex = -index * width;
tation_imgBox.style.transition = 'all 0.3s';
tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
},3000);
};
rightButton.addEventListener('click',function(){
index++;
var translatex = -index*width;
tation_imgBox.style.transition = 'all 0.3s';
tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
});
leftButton.addEventListener('click',function(){
index--;
var translatex = -index*width;
tation_imgBox.style.transition = 'all 0.3s';
tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
});
};
script>
html>
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
</head>
<style>
#RotationChartModule{
width: 564px;
height: 315px;
margin-top: 10px;
position: relative;
}
.PictureRotation{
width: 564px;
height: 315px;
position: relative;
border-radius: 10px;
overflow: hidden;
}
.tation_imgBox{
position: absolute;
transition-duration: 1s;
}
.tation_img{
position: relative;
}
.tation_img img{
width: 564px;
height: 315px;
display: block;
border-radius: 10px;
opacity: 1;
}
.tation_img.active{
z-index: 10;
opacity: 1;
}
.RotationDot_Dot{
position: absolute;
left: 244px;
width: auto;
height: 9px;
z-index: 13;
top: 280px;
padding: 3px 5px;
background-color: rgba(255, 255, 255, .3);
border-radius: 50px;
}
.rotation_Dot{
width: 9px;
height: 9px;
background-color: #fff;
float: left;
margin: 0 2px;
border-radius: 50px;
cursor: pointer;
list-style-type: none;
}
.rotation_Dot.active{
background-color: #ff5000;
}
.leftButton{
width: 20px;
height: 30px;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;
background-color: rgba(40, 38, 38, 0.2);
position: absolute;
top: 128px;
left: 0;
z-index: 40;
border: none;
}
.leftButton:hover{
background-color: rgba(40, 38, 38, 0.5);
}
.leftIcon{
line-height: 30px;
font-size: 12px;
color: #fff;
font-weight: 900;
font-style: normal;
position: absolute;
left: 2px;
top: 0px;
}
.rightButton{
width: 20px;
height: 30px;
border-bottom-left-radius: 50px;
border-top-left-radius: 50px;
background-color: rgba(40, 38, 38, 0.2);
position: absolute;
top: 128px;
right: 0;
z-index: 40;
border: none;
}
.rightButton:hover{
background-color: rgba(40, 38, 38, 0.5);
}
.rightIcon{
line-height: 30px;
font-size: 12px;
color: #fff;
font-weight: 900;
font-style: normal;
position: absolute;
right: 1px;
top: 0;
}
</style>
<body>
<div id="RotationChartModule">
<div class="PictureRotation">
<div id="tation_imgBox" style="width: 2840px;transform: translateX(0px);overflow:hidden;position: absolute;backface-visibility:hidden;">
<div class="tation_img" style="float:left;width:564px;" data-rotaion="0"><a href=""><img src="https://img1.baidu.com/it/u=1152507407,3935105199&fm=253&fmt=auto&app=138&f=JPEG?w=597&h=500" alt=""></a></div>
<div class="tation_img" style="float:left;width:564px;" data-rotaion="1"><a href=""><img src="https://img0.baidu.com/it/u=1508642736,848814477&fm=253&fmt=auto&app=138&f=JPEG?w=617&h=500" alt=""></a></div>
<div class="tation_img" style="float:left;width:564px;" data-rotaion="2"><a href=""><img src="https://img2.baidu.com/it/u=821789338,3694385318&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500" alt=""></a></div>
<div class="tation_img" style="float:left;width:564px;" data-rotaion="3"><a href=""><img src="https://img2.baidu.com/it/u=694773797,1520510657&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675" alt=""></a></div>
<div class="tation_img" style="float:left;width:564px;" data-rotaion="4"><a href=""><img src="https://img2.baidu.com/it/u=383380894,3933217319&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333" alt=""></a></div>
</div>
<ul class="RotationDot_Dot">
<li class="rotation_Dot active" data-tation="0"></li>
<li class="rotation_Dot" data-tation="1"></li>
<li class="rotation_Dot" data-tation="2"></li>
<li class="rotation_Dot" data-tation="3"></li>
<li class="rotation_Dot" data-tation="4"></li>
</ul>
<div class="btn" style="visibility:hidden;">
<button class="leftButton"><i class="leftIcon">◄</i></button>
<button class="rightButton"><i class="rightIcon">►</i></button>
</div>
</div>
</div>
</body>
<script>
window.onload = function(){
var PictureRotation = document.querySelector('.PictureRotation');
var leftButton = document.getElementsByClassName('leftButton')[0];
var rightButton = document.getElementsByClassName('rightButton')[0];
var tation_imgBox = PictureRotation.children[0];
var width = PictureRotation.offsetWidth;
var RotationDot_Dot = PictureRotation.children[1];
var btn = document.getElementsByClassName('btn')[0];
var index = 0;
var timer = setInterval(function(){
index++;
var translatex = -index * width;
tation_imgBox.style.transition = 'all 0.3s';
tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
},3000);
tation_imgBox.addEventListener('transitionend',function(){
if(index >= 5){
index = 0;
tation_imgBox.style.transition = 'none';
var translatex = -index * width;
tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
}else if(index < 0){
index = 4;
tation_imgBox.style.transition = 'none';
var translatex = -index *width;
tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
}
console.log(index)
RotationDot_Dot.querySelector('.active').classList.remove('active');
RotationDot_Dot.children[index].classList.add('active');
});
PictureRotation.onmouseover = function(){
btn.style.visibility = 'visible';
clearInterval(timer);
};
PictureRotation.onmouseout = function(){
btn.style.visibility = 'hidden';
timer = setInterval(function(){
index++;
var translatex = -index * width;
tation_imgBox.style.transition = 'all 0.3s';
tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
},3000);
};
// 点击li
RotationDot_Dot.onclick = function(e) {
if(e.target.className == 'rotation_Dot') {
index = e.target.dataset.tation;
var translatex = -index * width;
tation_imgBox.style.transition = 'all 0.3s';
tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
RotationDot_Dot.querySelector('.active').classList.remove('active');
RotationDot_Dot.children[index].classList.add('active');
}
}
rightButton.addEventListener('click',function(){
index++;
var translatex = -index*width;
tation_imgBox.style.transition = 'all 0.3s';
tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
});
leftButton.addEventListener('click',function(){
index--;
var translatex = -index*width;
tation_imgBox.style.transition = 'all 0.3s';
tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
});
};
</script>
</html>
RotationDot_Dot.addEventListener('click', function (e) {
let a = e.target.dataset.tation;
tation_imgBox.style.transition = 'none';
var translatex = -a * width;
tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
RotationDot_Dot.querySelector('.active').classList.remove('active');
RotationDot_Dot.children[a].classList.add('active');
});
首先, 你这一段代码的重复率很高
tation_imgBox.style.transition = 'all 0.3s';
tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
可将这段代码拆分为一个函数来使用
function switchBanner() {
var translatex = -index*width;
tation_imgBox.style.transition = 'all 0.3s';
tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
}
点击切换后只做 index 索引处理, 后调用 switchBanner 方法
function() {
index++
switchBanner()
}
回到问题, 我所理解你问题中的 状态栏 就是轮播图下面的 dot(小白点 | 分页器)
html代码中, 给每个 dot 标签都添加了 data-tation 属性, 这个属性可以代表 index 来使用 (要注意index 和 data-tation 属性的对应) 看你 index 应该是从 0 开始的
可以给 .RotationDot_Dot 绑定事件委托, 点击到 li 标签后, 从事件对象(event) 的 dataset 属性中获取 tation 属性的值, 赋值给 index, 再调用 switchBanner 方法 即可完成 dot 切换功能.