无缝轮播的案例 及css3无缝轮播案例
无缝轮播的案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无缝轮播</title>
<style>
*{
margin:0;
padding:0;
}
div{
width:1000px;
height:200px;
position:relative;
top:20px;
left:100px;
border:red 5px solid;
overflow: hidden;
}
ul{
width:2000px;
height:200px;
list-style: none;
position:absolute;
top:0;
left:-1020px;
}
ul>li{
width:200px;
height:200px;
float:left;
}
</style>
</head>
<body>
<div>
<ul id="ul">
<li style="background:pink"></li>
<li style="background:blue"></li>
<li style="background:orange"></li>
<li style="background:black"></li>
<li style="background:green"></li>
<li style="background:pink"></li>
<li style="background:blue"></li>
<li style="background:orange"></li>
<li style="background:black"></li>
<li style="background:green"></li>
</ul>
</div>
</body>
</html>
<script>
var ul=document.getElementById("ul")
var t=null;
var num=1;
t=setInterval(function(){
if (ul.offsetLeft<-ul.offsetWidth/2)
{
ul.style.left=0+"px";
}
ul.style.left=(ul.offsetLeft-num)+"px";
},100/6)
</script>
无缝轮播的解析：
1.无论什么时候，ul.offsetleft++ 无论什么时候，他的ul都要走
2.初始值，设立，直接设到第二板块那里
3.可以理解成，每次只走第二板块，因为每次需要第二板块 去覆盖掉，第一次模块走的东西
4.造成的视觉错觉
css3无缝轮播案例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="rem插件.js"></script>
<style>
*{
margin:0;
padding:0;
}
html{
font-size:100px;
overflow-x:hidden;
}
body{
font-size:14px;
}
div,ul,li,img{
margin:0;
padding:0;
}
.box{
width:100%;
height:1.17rem;
}
.clearfix:after{
content:"";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.content{
width:500%;
height:1.17rem;
}
.content div{
width:20%;
height:1.17rem;
float:left;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div style="background:#cccccc"></div> <!-- 第三张-->
<div style="background:#ffb72b"></div> <!-- 第一张-->
<div style="background:lightblue"></div> <!-- 第二张-->
<div style="background:#cccccc"></div> <!-- 第三张-->
<div style="background:#ffb72b"></div> <!-- 第一张-->
</div>
</div>
</body>
</html>
<script>
var t=null,index=1;
var box=document.querySelector(".box");
var wid=box.offsetWidth;
var content=document.querySelector(".content");
content.style.transform="translateX(-"+(wid)+"px)";
t=setInterval(function(){
index++;
addtransition()
content.style.transform="translateX(-"+(wid*index)+"px)";
},2000)
//过度函数
function addtransition(){
content.style.transition="all .5s linear";
content.style.webkitTransition="all .5s linear";
}
function removetransition(){
content.style.transition="none";
content.style.webkitTransition="none";
}
content.addEventListener("transitionend",function(){
if(index>3){
index=1;
removetransition()
content.style.transform="translateX(-"+(wid*index)+"px)";
}
})
</script>
