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>
来源: http://www.bubuko.com/infodetail-3034128.html