原生js实现用按钮操作图片轮播
问题：点击button1实现图片向左移动后，点击button2无法触发图片向右移动。
（程序中的图片请随便用找图片代替！）
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
*{
margin: 0;
padding: 0;
}
#block1{
height:191px;
width: 912px;
border: 1px solid #000;
margin: 50px auto;
font-size: 0px;
overflow: hidden;
}
#block1 ul{
width: 2000px;
position: relative;
}
#block1 ul li{
display: inline-block;
}
style>
head>
<body>
<div id="block1">
<ul id="ul1">
<li><img src="xiaomuweb/xiaomupic/assets/Mask group1.png" alt="">li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group2.png" alt="">li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group3.png" alt="">li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group4.png" alt="">li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group5.png" alt="">li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group6.png" alt="">li>
ul>
div>
<input type="button" id="toL" value="ToLeft">
<input type="button" id="toR" value="ToRight">
<script>
var block1=document.getElementById('block1');
var ul1=document.getElementById('ul1');
ul1.innerHTML+=ul1.innerHTML;// 复制多一遍所有的li
var left=0;
var right=912;
var timer;
var bntL=document.getElementById('toL');
var bntR=document.getElementById('toR');
function moveL(){
clearInterval(timer);
timer=setInterval(function(){
left-=12;
if(left<=-912) left=0;
ul1.style.left=left+'px';
},25)
}//向左移动
function moveR(){
clearInterval(timer);
timer=setInterval(function(){
right-=12
if(right<=0) right=912;
ul1.style.right=right+'px';
},25)
}//向右移动
bntL.onclick=moveL;//触发向左移动的函数
bntR.onclick=moveR;//触发向右移动的函数
script>
body>
html>
出现这个问题的原因是，你在点击向左按钮后，就给ul的style里面添加了一个“left”的值，然后你再去按向右的按钮时，虽然这个时候ul的style里面right值在发生变化，但是它的left值是固定的，而在相对定位中，left的值比right值具有更高的优先级，所以在moveR函数中单单修改right值是不够的，要把left值删掉，改成这样：
function moveR(){
clearInterval(timer);
timer=setInterval(function(){
right-=12
if(right<=0) right=912;
ul1.style = `right: ${right}px`; // 直接修改style，把left值删掉
},25)
}//向右移动
修改moveL和moveR函数中的left和right变量。在向左移动的函数中，将ul1.style.left设置为left + 'px'，在向右移动的函数中，将ul1.style.left设置为right + 'px' 。
我看到这里你使用了timer=setInterval(function())，在触发新的定时器之前先清除之前的定时器，否则会导致多个定时器同时运行。
这个问题的原因是,你在点击button2后,由于使用了ul1.style.right来移动图片,导致后续的left值没有同步更新,所以无法继续触发向左移动。
解决方法是:在每次移动后,同步更新left和right的值,使两者始终展示同一组图片。
修改后的代码如下:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 样式省略 -->
</head>
<body>
<div id="block1">
<ul id="ul1">
<!-- li元素省略 -->
</ul>
</div>
<input type="button" id="toL" value="ToLeft">
<input type="button" id="toR" value="ToRight">
<script>
var block1=document.getElementById('block1');
var ul1=document.getElementById('ul1');
ul1.innerHTML+=ul1.innerHTML;
var left=0;
var right=912;
var timer;
var bntL=document.getElementById('toL');
var bntR=document.getElementById('toR');
function moveL(){
clearInterval(timer);
timer=setInterval(function(){
left-=12;
right=left; // 同步更新right
if(left<=-912) {
left=0;
right=912;
}
ul1.style.left=left+'px';
},25)
}
function moveR(){
clearInterval(timer);
timer=setInterval(function(){
right-=12;
left=right; // 同步更新left
if(right<=0) {
right=912;
left=0;
}
ul1.style.right=right+'px';
},25)
}
bntL.onclick=moveL;
bntR.onclick=moveR;
</script>
</body>
</html>
改动的地方主要在:
moveL函数中,加入right=left;同步更新right的值
moveR函数中,加入left=right;同步更新left的值
这样,无论你使用ul1.style.left还是ul1.style.right移动图片,left和right的值都会同步更新,所以点击button1和button2都可以正常触发图片移动。
希望这个解释和修改能帮助你理解和解决这个问题。如有任何其他疑问,欢迎在评论中提出。
下面是修改好的代码，运行结果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#block1 {
height: 191px;
width: 912px;
border: 1px solid #000;
margin: 50px auto;
font-size: 0px;
overflow: hidden;
}
#block1 ul {
position: relative;
height: 100%;
white-space: nowrap; /* 横向不换行 */
transition: transform 0.5s ease; /* 添加动画过渡效果 */
}
#block1 ul li {
display: inline-block;
width: 912px;
height: 191px;
}
</style>
</head>
<body>
<div id="block1">
<ul id="ul1">
<li><img src="xiaomuweb/xiaomupic/assets/Mask group1.png" alt="" /></li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group2.png" alt="" /></li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group3.png" alt="" /></li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group4.png" alt="" /></li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group5.png" alt="" /></li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group6.png" alt="" /></li>
</ul>
</div>
<input type="button" id="toL" value="ToLeft" />
<input type="button" id="toR" value="ToRight" />
<script>
var block1 = document.getElementById("block1");
var ul1 = document.getElementById("ul1");
var lis = ul1.getElementsByTagName("li");
var index = 0; // 当前显示的图片索引
var bntL = document.getElementById("toL");
var bntR = document.getElementById("toR");
// 向左移动
function moveL() {
index--;
if (index < 0) {
index = lis.length - 1;
}
ul1.style.transform = "translateX(-" + index * 912 + "px)";
}
// 向右移动
function moveR() {
index++;
if (index > lis.length - 1) {
index = 0;
}
ul1.style.transform = "translateX(-" + index * 912 + "px)";
}
bntL.onclick = moveL; // 触发向左移动的函数
bntR.onclick = moveR; // 触发向右移动的函数
</script>
</body>
</html>
你需要每次点击按钮的时候需要把 left right样式移除就行了。下面的我修改的代码测试正常
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#block1{
height:400px;
width: 912px;
border: 1px solid #000;
margin: 50px auto;
font-size: 0px;
overflow: hidden;
}
#block1 ul{
width: 2000px;
position: relative;
}
#block1 ul li{
display: inline-block;
}
</style>
</head>
<body>
<div id="block1">
<ul id="ul1">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.png" alt=""></li>
<li><img src="3.jfif" alt=""></li>
<li><img src="4.png" alt=""></li>
<li><img src="5.png" alt=""></li>
</ul>
</div>
<input type="button" id="toL" value="ToLeft">
<input type="button" id="toR" value="ToRight">
<script>
var block1=document.getElementById('block1');
var ul1=document.getElementById('ul1');
ul1.innerHTML+=ul1.innerHTML;// 复制多一遍所有的li
var left=0;
var right=912;
var timer;
var bntL=document.getElementById('toL');
var bntR=document.getElementById('toR');
function moveL(){
window.clearInterval(timer);
ul1.style.left="";
ul1.style.right="";
timer=setInterval(function(){
left-=12;
if(left<=-912) left=0;
ul1.style.left=left+'px';
},25)
}//向左移动
function moveR(){
window.clearInterval(timer);
ul1.style.left="";
ul1.style.right="";
timer=setInterval(function(){
right-=12
if(right<=0) right=912;
ul1.style.right=right+'px';
},25)
}//向右移动
bntL.onclick=moveL;//触发向左移动的函数
bntR.onclick=moveR;//触发向右移动的函数
</script>
</body>
</html>
引用chatGPT作答，在moveR()函数中，需要将ul1的left属性改为right，以控制图片向右移动。在计算right值时，应该加上当前ul1的left值，因为ul1的位置是相对于block1的左边缘定位的，而不是右边缘。修改moveR()函数如下：
function moveR(){
clearInterval(timer);
timer=setInterval(function(){
right-=12
if(right<=0) right=912;
ul1.style.left = -left + right + 'px';
},25)
}
这里使用了-left + right的方式来计算ul1的left值，以确保正确地向右移动图片。
另外，需要将left和right的初始值改为0，而不是912，因为初始时图片应该在最左侧。修改代码如下：
var left=0;
var right=0;
这样修改后，点击button1可以使图片向左移动，点击button2可以使图片向右移动。
以下答案由GPT-3.5大模型与博主波罗歌共同编写：
在代码中，图片轮播的基本逻辑已经实现得很好了，但是在向右移动的函数 moveR() 中，修改 right 并赋值给 ul1.style.right 无法实现图片向右移动，因为 right 属性不会改变元素的位置。
要实现向右移动图片，可以将 ul1 的 position 属性设置为 relative，然后在 moveR() 函数中，修改 ul1 的 left 属性，让它向右移动即可。
以下是修改后的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#block1 {
height: 191px;
width: 912px;
border: 1px solid #000;
margin: 50px auto;
font-size: 0px;
overflow: hidden;
}
#block1 ul {
width: 2000px;
position: relative;
}
#block1 ul li {
display: inline-block;
}
</style>
</head>
<body>
<div id="block1">
<ul id="ul1">
<li><img src="xiaomuweb/xiaomupic/assets/Mask group1.png" alt="" /></li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group2.png" alt="" /></li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group3.png" alt="" /></li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group4.png" alt="" /></li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group5.png" alt="" /></li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group6.png" alt="" /></li>
</ul>
</div>
<input type="button" id="toL" value="ToLeft" />
<input type="button" id="toR" value="ToRight" />
<script>
var block1 = document.getElementById("block1");
var ul1 = document.getElementById("ul1");
ul1.innerHTML += ul1.innerHTML; // 复制多一遍所有的li
var left = 0;
var right = 0;
var timer;
var bntL = document.getElementById("toL");
var bntR = document.getElementById("toR");
function moveL() {
clearInterval(timer);
timer = setInterval(function () {
left -= 12;
if (left <= -912) left = 0;
ul1.style.left = left + "px";
}, 25);
} //向左移动
function moveR() {
clearInterval(timer);
timer = setInterval(function () {
right += 12;
if (right >= 912) right = 0;
ul1.style.left = -right + "px";
}, 25);
} //向右移动
bntL.onclick = moveL; //触发向左移动的函数
bntR.onclick = moveR; //触发向右移动的函数
</script>
</body>
</html>
如果我的回答解决了您的问题，请采纳！