js实现无限不间断单方向滑动
代码如下：
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
.box{
width: 800px;
height: 500px;
border: 1px solid #000000;
position: relative;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.roll_box{
height: 100%;
position: relative;
margin: 0 auto;
padding: 0;
float: left;
}
.roll_box>ul{
padding: 0;
margin: 0;
display: flex;
flex-flow: row nowrap;
}
.roll_box>ul>li{
width: 200px;
height: 100%;
padding: 0;
list-style: none;
border: 1px solid #000000;
box-sizing: border-box;
}
.li_head{
width: 100%;
height: 200px;
background: #504044;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.li_center{
width: 100%;
height: 50px;
background: #d1c5ca;
text-align: center;
line-height: 50px;
font-size: 16px;
}
.li_footer{
width: 100%;
height: 250px;
background: #2fc1ff;
}
.hexa{
width: 96px;
height: 120px;
overflow: hidden;
transform: rotate(120deg);
margin: auto;
position: relative;
}
.hexa_child{
width: 100%;
height: 100%;
transform: rotate(-60deg);
overflow: hidden;
}
.hexa_child_child{
width: 100%;
height: 100%;
transform: rotate(-60deg);
overflow: hidden;
background-color: red;
}
.hexa_text{
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
style>
head>
<body>
<div class="box">
<div id="roll_box" class="roll_box">
<ul id="roll_list1">
<li>
<div class="li_head">
<div class="hexa">
<div class="hexa_child">
<div class="hexa_child_child">div>
div>
div>
<span class="hexa_text">Hello_1span>
div>
<div class="li_center">Hello world 1div>
<div class="li_footer">div>
li>
<li>
<div class="li_head">
<div class="hexa">
<div class="hexa_child">
<div class="hexa_child_child">div>
div>
div>
<span class="hexa_text">Hello_2span>
div>
<div class="li_center">Hello world 2div>
<div class="li_footer">div>
li>
<li>
<div class="li_head">
<div class="hexa">
<div class="hexa_child">
<div class="hexa_child_child">div>
div>
div>
<span class="hexa_text">Hello_3span>
div>
<div class="li_center">Hello world 3div>
<div class="li_footer">div>
li>
<li>
<div class="li_head">
<div class="hexa">
<div class="hexa_child">
<div class="hexa_child_child">div>
div>
div>
<span class="hexa_text">Hello_4span>
div>
<div class="li_center">Hello world 4div>
<div class="li_footer">div>
li>
<li>
<div class="li_head">
<div class="hexa">
<div class="hexa_child">
<div class="hexa_child_child">div>
div>
div>
<span class="hexa_text">Hello_1span>
div>
<div class="li_center">Hello world 1div>
<div class="li_footer">div>
li>
<li>
<div class="li_head">
<div class="hexa">
<div class="hexa_child">
<div class="hexa_child_child">div>
div>
div>
<span class="hexa_text">Hello_2span>
div>
<div class="li_center">Hello world 2div>
<div class="li_footer">div>
li>
<li>
<div class="li_head">
<div class="hexa">
<div class="hexa_child">
<div class="hexa_child_child">div>
div>
div>
<span class="hexa_text">Hello_3span>
div>
<div class="li_center">Hello world 3div>
<div class="li_footer">div>
li>
<li>
<div class="li_head">
<div class="hexa">
<div class="hexa_child">
<div class="hexa_child_child">div>
div>
div>
<span class="hexa_text">Hello_4span>
div>
<div class="li_center">Hello world 4div>
<div class="li_footer">div>
li>
ul>
div>
div>
<script type="text/javascript">
var box = document.getElementById("roll_box");
var list1 = document.getElementById("roll_list1");
var hexa = document.getElementsByClassName("hexa");
var timer = null;
var num = 0;
function move(){
if(Math.abs(num) >= list1.offsetWidth/2){
num = 0;
box.style.left = num + 'px';
}else{
num --;
box.style.left = num + 'px';
}
function text(i,n,c,p) {
for (i;i<c;i++){
// console.log(`hexa[${i+n}].style.transform = scale(${(1.0 + i*0.1).toFixed(1)})`);
if (Math.abs(box.offsetLeft)>=p){
hexa[i+n].style.transform = `scale(${(1.0 + i*0.1).toFixed(1)})`;
}
}
}
text(0,0,5,0);
text(0,1,5,200);
text(0,2,5,400);
text(0,3,5,600);
text(0,4,4,800);
// if (Math.abs(box.offsetLeft)>=0){
// hexa[0].style.transform = "scale("+ 1.0 +")";
// hexa[1].style.transform = "scale("+ 1.1 +")";
// hexa[2].style.transform = "scale("+ 1.2 +")";
// hexa[3].style.transform = "scale("+ 1.3 +")";
// hexa[4].style.transform = "scale("+ 1.4 +")";
// }
// if (Math.abs(box.offsetLeft)>=200){
// hexa[1].style.transform = "scale("+ 1.0 +")";
// hexa[2].style.transform = "scale("+ 1.1 +")";
// hexa[3].style.transform = "scale("+ 1.2 +")";
// hexa[4].style.transform = "scale("+ 1.3 +")";
// hexa[5].style.transform = "scale("+ 1.4 +")";
// }
// if (Math.abs(box.offsetLeft)>=400){
// hexa[2].style.transform = "scale("+ 1.0 +")";
// hexa[3].style.transform = "scale("+ 1.1 +")";
// hexa[4].style.transform = "scale("+ 1.2 +")";
// hexa[5].style.transform = "scale("+ 1.3 +")";
// hexa[6].style.transform = "scale("+ 1.4 +")";
// }
// if (Math.abs(box.offsetLeft)>=600){
// hexa[3].style.transform = "scale("+ 1.0 +")";
// hexa[4].style.transform = "scale("+ 1.1 +")";
// hexa[5].style.transform = "scale("+ 1.2 +")";
// hexa[6].style.transform = "scale("+ 1.3 +")";
// hexa[7].style.transform = "scale("+ 1.4 +")";
// }
// if (Math.abs(box.offsetLeft)>=800){
// hexa[4].style.transform = "scale("+ 1.0 +")";
// hexa[5].style.transform = "scale("+ 1.1 +")";
// hexa[6].style.transform = "scale("+ 1.2 +")";
// hexa[7].style.transform = "scale("+ 1.3 +")";
// }
}
timer = setInterval(move,20);
script>
body>
html>
效果如下：