图片轮播的几种方式
1.利用 animation 实现无js轮播 但是无法做到第一张和最后一张衔接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
</title>
<style>
.contianer{
overflow:hidden;
width:200px;
}
ul{
width:400%;
font-size:0;
animation:switch 10s linear 1s ;
}
li{
width:25%;
display:inline-block;
font-size:20px;
height:200px;
}
*{
margin:0;
padding:0;
}
@keyframes switch{
0% {transform:translateX(0);}
25% {transform:translateX(-25%);}
50% {transform:translateX(-50%);}
75% {transform:translateX(-75%);}
100% {transform:translateX(-100%);}
}
</style>
</head>
<body>
<div class="contianer">
<ul >
<li style="background:yellow">1</li>
<li style="background:red">2</li>
<li style="background:black">3</li>
<li style="background:blue">4</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
</title>
<style>
.contianer{
overflow:hidden;
width:200px;
}
ul{
width:400%;
font-size:0;
transition:transform 1s;
}
li{
width:25%;
display:inline-block;
font-size:20px;
height:200px;
}
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="contianer" >
<ul id="t">
<li style="background:yellow">1</li>
<li style="background:red">2</li>
<li style="background:blue">3</li>
<li style="background:yellow">1</li>
</ul>
</div>
<script>
count = 0 ;
setInterval(function(){
count+=25;
t.style["transition"] = "transform 1s";
t.style["transform"] = "translateX(-"+count+"%)";
if(count==75)
{count=0;
setTimeout(function(){
t.style["transition"] = "none 0s";
t.style["transform"] = "translateX(0%)";
},1000)
}
},2000)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
</title>
<style>
.contianer{
overflow:hidden;
width:200px;
}
ul{
font-size:0;
transition:transform 1s;
}
li:first-child{
left:0;
}
li{
position:absolute;
width:100%;
font-size:20px;
height:200px;
left:-100%;
transition:left 500ms ease 0s;
}
li:hover{
left:50%;
}
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="contianer" >
<ul id="t">
<li style="background:yellow">1</li>
<li style="background:red">2</li>
</ul>
</div>
<script>
setTimeout(function(){
var lis = document.getElementsByTagName("li");
count = 0 ;
setInterval(function(){
lis[1].style["transition"]="left 1s";
lis[0].style["transition"]="left 1s";
if(count==0)
{
lis[0].style.left="100%";
lis[1].style.left="0"
count=1;
setTimeout(function(){
lis[0].style["transition"]="none 0s";
lis[0].style.left="-100%"
},1000)
}
else
{
count=0;
lis[0].style.left="0";
lis[1].style.left="100%"
setTimeout(function(){
lis[1].style["transition"]="none 0s";
lis[1].style.left="-100%"
},1000)
}
},3000)
},0)
</script>
</body>
</html>
