【发布时间】：2021-01-24 15:41:08
【问题描述】：
我正在尝试制作一个滑块，其内容以特定间隔旋转。该代码在单击时运行良好，但是当我尝试使其自动运行时，它无法正常工作。我不知道错误到底在哪里，但我认为它是在函数的调用和定义中，任何帮助将不胜感激。
这是我的代码：
<script>
var slider = document.getElementById('slider');
var active = document.getElementById('active');
var line1 = document.getElementById('line1');
var line2 = document.getElementById('line2');
var line3 = document.getElementById('line3');
var line4 = document.getElementById('line4');
var line5 = document.getElementById('line5');
var line6 = document.getElementById('line6');
var line7 = document.getElementById('line7');
var line8 = document.getElementById('line8');
var line9 = document.getElementById('line9');
var line10 = document.getElementById('line10');
function fline1() {
line1=function() {
slider.style.transform = 'translateX(0)';
active.style.top = '0px';
}
}
function fline2() {
line2=function() {
slider.style.transform = 'translateX(-10)';
active.style.top = '32px';
}
}
function fline3() {
line3=function() {
slider.style.transform = 'translateX(-20)';
active.style.top = '64px';
}
}
function fline4() {
line4=function() {
slider.style.transform = 'translateX(-30)';
active.style.top = '96px';
}
}
function fline5() {
line5=function() {
slider.style.transform = 'translateX(-40)';
active.style.top = '128px';
}
}
function fline6() {
line6=function() {
slider.style.transform = 'translateX(-50)';
active.style.top = '160px';
}
}
function fline7() {
line7=function() {
slider.style.transform = 'translateX(-60)';
active.style.top = '192px';
}
}
function fline8() {
line8=function() {
slider.style.transform = 'translateX(-70)';
active.style.top = '224px';
}
}
function fline9() {
line9=function() {
slider.style.transform = 'translateX(-80)';
active.style.top = '256px';
}
}
function fline10() {
line10=function() {
slider.style.transform = 'translateX(-90)';
active.style.top = '288px';
}
}
这里是最初使用手动旋转的代码：
var slider = document.getElementById('slider');
var active = document.getElementById('active');
var line1 = document.getElementById('line1');
var line2 = document.getElementById('line2');
var line3 = document.getElementById('line3');
var line4 = document.getElementById('line4');
var line5 = document.getElementById('line5');
var line6 = document.getElementById('line6');
var line7 = document.getElementById('line7');
var line8 = document.getElementById('line8');
var line9 = document.getElementById('line9');
var line10 = document.getElementById('line10');
line1.onclick= function() {
slider.style.transform = 'translateX(0)';
active.style.top = '0px';
}
line2.onclick= function() {
slider.style.transform = 'translateX(-10%)';
active.style.top = '32px';
}
line3.onclick= function() {
slider.style.transform = 'translateX(-20%)';
active.style.top = '64px';
}
line4.onclick= function() {
slider.style.transform = 'translateX(-30%)';
active.style.top = '96px';
}
line5.onclick= function() {
slider.style.transform = 'translateX(-40%)';
active.style.top = '128px';
}
line6.onclick= function() {
slider.style.transform = 'translateX(-50%)';
active.style.top = '160px';
}
line7.onclick= function() {
slider.style.transform = 'translateX(-60%)';
active.style.top = '192px';
}
line8.onclick= function() {
slider.style.transform = 'translateX(-70%)';
active.style.top = '224px';
}
line9.onclick= function() {
slider.style.transform = 'translateX(-80%)';
active.style.top = '256px';
}
line10.onclick= function() {
slider.style.transform = 'translateX(-90%)';
active.style.top = '288px';
}
编辑：这里是滑动div的html：
<div id="slider">
<div class="msg-col">
<h1> {{the_word1}} </h1>
<p class="wCaterory"> word1_category </p>
<p>: to mark or show a difference in : constitute a contrasting element that distinguishes
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
<div class="msg-col">
<h1> the_word2 </h1>
<p class="wCaterory"> word1_category </p>
<p>: something for which one is responsible
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
<div class="msg-col">
<h1> the_word3 </h1>
<p class="wCaterory"> word1_category </p>
<p>the action or process of negotiating or being negotiated —often used in plural
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
<div class="msg-col">
<h1> the_word4 </h1>
<p class="wCaterory"> word1_category </p>
<p>suggestion made to someone to choose something over the others
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
<div class="msg-col">
<h1> the_word5 </h1>
<p class="wCaterory"> word1_category </p>
<p>suggestion made to someone to choose something over the others
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
<div class="msg-col">
<h1> the_word6 </h1>
<p class="wCaterory"> word1_category </p>
<p>suggestion made to someone to choose something over the others
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
<div class="msg-col">
<h1> the_word7 </h1>
<p class="wCaterory"> word1_category </p>
<p>suggestion made to someone to choose something over the others
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
<div class="msg-col">
<h1> the_word8 </h1>
<p class="wCaterory"> word1_category </p>
<p>suggestion made to someone to choose something over the others
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
<div class="msg-col">
<h1> the_word9 </h1>
<p class="wCaterory"> word1_category </p>
<p>suggestion made to someone to choose something over the others
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
<div class="msg-col">
<h1> the_word10 </h1>
<p class="wCaterory"> word1_category </p>
<p>suggestion made to someone to choose something over the others
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
</div>
<div class="controller">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
<div id="line4"></div>
<div id="line5"></div>
<div id="line6"></div>
<div id="line7"></div>
<div id="line8"></div>
<div id="line9"></div>
<div id="line10"></div>
<div id="active"></div>
</div>
CSS：
.msg-container{
width: 600px;
height: 320px;
position: absolute;
left: 14%;
top: 57%;
transform: translateY(-50%);
overflow: hidden;
}
#slider{
display: inline-flex;
transition: 2s;
}
.msg-col {
width: 600px;
height:280px;
}
.msg-col h1{
color: #fff;
font-size: 80px;
font-weight: 100;
margin: 10px;
}
.msg-col p{
color: #ddd;
font-size: 15px;
line-height: 25px;
}
.msg-col a{
display: inline-block;
text-decoration: none;
color: #555;
background: #fff;
font-size: 15px;
padding: 10px 35px;
border-radius: 30px;
margin-top:25px;
}
.controller {
width: 1px;
height: 320px;
display: block;
background: #c0c0c0;
position: absolute;
top: 55%;
right: 50px;
transform: translateY(-50%);
}
#line1,#line2, #line3, #line4, #line5, #line6, #line7, #line8, #line9,
#line10 {
height: 32px;
width: 10px;
cursor: pointer;
transform: translateX(-50%);
}
#active{
width: 5px;
height: 32px;
border-radius: 10px;
background: #fff;
position: absolute;
top:0;
transform: translateX(-50);
}
【问题讨论】：
-
能把html和css代码也贴一下吗？
-
@GabrielMacus 这是 HTML，感谢您的回复
-
我看不到 #line... 元素。您可以将您的代码放在jsfiddle.net 中，以及您目前所做的工作
-
@GabrielMacus 我刚才已经包含了它们，请您检查一下。
-
这是你想要达到的效果吗：rotating text
标签： javascript html slider slide