1.html片段,循环部分需要写两遍,保证首尾相连的连贯性
<div class="left_4_widtha">
<div class="left_4t">
<div
id="img1"
class="left4_1"
style=""
:class="[
{
a: leftList_4.value[0] < 50,
},
{
b: leftList_4.value[0] >= 50,
},
{ css_4: cssNum === 1 },
]"
@click="leftTc_4((name = leftList_4.bt[0]))"
>
<span style="color: #00deed">{{ leftList_4.value[0] }}</span> <br />{{
leftList_4.bt[0]
}}
</div>
<div
class="left4_1"
:class="[
{
a: leftList_4.value[1] < 50,
},
{
b: leftList_4.value[1] >= 50,
},
{ css_4: cssNum === 1 },
]"
@click="leftTc_4((name = leftList_4.bt[1]))"
>
<span style="color: #00deed">{{ leftList_4.value[1] }}</span> <br />{{
leftList_4.bt[1]
}}
</div>
<div
class="left4_1"
:class="[
{
a: leftList_4.value[2] < 50,
},
{
b: leftList_4.value[2] >= 50,
},
{ css_4: cssNum === 1 },
]"
@click="leftTc_4((name = leftList_4.bt[2]))"
>
<span style="color: #00deed">{{ leftList_4.value[2] }}</span> <br />{{
leftList_4.bt[2]
}}
</div>
<div
class="left4_1"
:class="[
{
a: leftList_4.value[3] < 50,
},
{
b: leftList_4.value[3] >= 50,
},
{ css_4: cssNum === 1 },
]"
@click="leftTc_4((name = leftList_4.bt[3]))"
>
<span style="color: #00deed">{{ leftList_4.value[3] }}</span> <br />{{
leftList_4.bt[3]
}}
</div>
//以下为复制部分,和上面内容完全一样
<div
id="img1"
class="left4_1"
style=""
:class="[
{
a: leftList_4.value[0] < 50,
},
{
b: leftList_4.value[0] >= 50,
},
{ css_4: cssNum === 1 },
]"
@click="leftTc_4((name = leftList_4.bt[0]))"
>
<span style="color: #00deed">{{ leftList_4.value[0] }}</span> <br />{{
leftList_4.bt[0]
}}
</div>
<div
class="left4_1"
:class="[
{
a: leftList_4.value[1] < 50,
},
{
b: leftList_4.value[1] >= 50,
},
{ css_4: cssNum === 1 },
]"
@click="leftTc_4((name = leftList_4.bt[1]))"
>
<span style="color: #00deed">{{ leftList_4.value[1] }}</span> <br />{{
leftList_4.bt[1]
}}
</div>
<div
class="left4_1"
:class="[
{
a: leftList_4.value[2] < 50,
},
{
b: leftList_4.value[2] >= 50,
},
{ css_4: cssNum === 1 },
]"
@click="leftTc_4((name = leftList_4.bt[2]))"
>
<span style="color: #00deed">{{ leftList_4.value[2] }}</span> <br />{{
leftList_4.bt[2]
}}
</div>
<div
class="left4_1"
:class="[
{
a: leftList_4.value[3] < 50,
},
{
b: leftList_4.value[3] >= 50,
},
{ css_4: cssNum === 1 },
]"
@click="leftTc_4((name = leftList_4.bt[3]))"
>
<span style="color: #00deed">{{ leftList_4.value[3] }}</span> <br />{{
leftList_4.bt[3]
}}
</div>
</div>
</div>
2.css部分,两种轮播效果都可使用,看自己需求
.left_4_widtha {
width: 80%;
height: 50%;
overflow: auto;
margin-left: 90px;
}
.left_4t {
width: 200%;
height: 100%;
float: left;
overflow: auto;
}
.left4_1 {
width: 100px;
height: 100%;
float: left;
margin-top: 5px;
padding-top: 25px;
text-align: center;
cursor: pointer;
/* animation: scrolltop 10s step-start infinite; */ //逐帧轮播
animation: scrolltop 12s linear infinite;//普通轮播
}
@keyframes scrolltop {
0% {
transform: translateX(0%);
}
25% {
transform: translateX(-100%);
}
50% {
transform: translateX(-200%);
}
75% {
transform: translateX(-300%);
}
100% {
transform: translateX(-400%);
}
}
.left_4t > .a {
background: url(../../assets/蓝色.png) 50% 50% no-repeat;
}
.left_4t > .b {
background: url(../../assets/bz_6.png) 50% 50% no-repeat;
}
3.效果图(截不了动态的)