第一种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
list-style: none;
padding: 0;
margin: 0;
}
img {
width: 300px;
height: 300px;
}
ul {
display: flex;
position: relative;
/*left: -300px;*/
left: 0px;
}
.box {
overflow: hidden;
width: 300px;
height: 300px;
margin: 0 auto;
position: relative;
}
.btn {
width: 300px;
margin: 0 auto;
text-align: center;
}
button {
width: 50px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
</ul>
</div>
<div class="btn">
<button><</button>
<button>></button>
</div>
</body>
<script type="text/javascript">
var arrLi = document.getElementsByTagName("li");
var arrBtn = document.getElementsByTagName("button");
var oUl = document.getElementsByTagName("ul")[0];
var moDis = arrLi[0].offsetWidth;
var kai=true;
arrBtn[1].addEventListener("click", rgt)
function rgt() {
if (kai) {
kai=false;
oUl.style.transition = "2s ease";
oUl.style.left = -moDis + "px";
setTimeout(function () {
oUl.appendChild(oUl.firstElementChild)
oUl.style.transition = "none";
oUl.style.left = 0 + "px";
kai=true;
}, 2000)
}
};
arrBtn[0].addEventListener("click", lft);
function lft() {
if (kai) {
kai=false;
oUl.style.transition="none";
oUl.insertBefore(oUl.lastElementChild,oUl.firstChild);
oUl.style.left=-moDis+"px";
setTimeout(function () {
oUl.style.transition="2s ease";
oUl.style.left=0+"px";
},0);
setTimeout(function () {
kai=true;
},2000);
}
};
</script>
</html>
第二种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
list-style: none;
padding: 0;
margin: 0;
}
img{
width: 300px;
height: 300px;
}
ul{
display: flex;
position: relative;
left: -300px;
}
.box{
overflow: hidden;
width: 300px;
height:300px;
margin: 0 auto;
position:relative;
}
.btn{
width: 300px;
margin: 0 auto;
text-align: center;
}
button{
width: 50px;
}
.ball{
width: 100px;
margin: 0 auto;
left: 0;
}
.ball li{
width: 10px;
height: 10px;
border-radius: 50%;
border:1px solid black;
margin: 10px;
}
.act{
border-radius:50% ;
background-color: black;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="3.jpg"></li>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="1.jpg"></li>
</ul>
</div>
<div class="btn">
<ul class="ball">
<li class="act"></li>
<li></li>
<li></li>
</ul>
<button><</button>
<button>></button>
</div>
</body>
<script type="text/javascript">
var arrLi=document.getElementsByTagName("li")
var arrBtn=document.getElementsByTagName("button")
var oUl=document.getElementsByTagName("ul")
var arrBall=document.getElementsByClassName("ball")[0].getElementsByTagName('li');
var a=0
var kai=true
var rgt
var lft
arrBtn[1].addEventListener("click",function rgt(){
if(kai){
kai=false
if(oUl[0].style.left=="-1200px"){
a=0
oUl[0].style.left=-arrLi[a].offsetWidth+"px"
oUl[0].style.transition=""
}
a++
oUl[0].style.left=-(a+1)*arrLi[a].offsetWidth+"px"
oUl[0].style.transition="2s ease"
for (var i = 0; i < arrBall.length; i++) {
arrBall[i].className=""
}
if(a>2){
arrBall[0].className="act"
}
else{
arrBall[a].className="act"
}
setTimeout(function(){
kai=true},2000)}
})
arrBtn[0].addEventListener("click",function lft(){
if(kai){
kai=false
a--
oUl[0].style.left=-(a+1)*arrLi[a+1].offsetWidth+"px"
oUl[0].style.transition="2s ease"
for (var i = 0; i < arrBall.length; i++) {
arrBall[i].className=""
}
if(a==-1){
arrBall[2].className="act"
}
else{
arrBall[a].className="act"
}
setTimeout(function(){
kai=true
if(oUl[0].style.left=="0px"){
a=2
oUl[0].style.left=-900+"px";
oUl[0].style.transition=""
}
},2000) }
})
// time=setInterval(function rgt(){
// if(kai){
// kai=false
// if(oUl[0].style.left=="-1200px"){
// a=0
// oUl[0].style.left=-arrLi[a].offsetWidth+"px"
// oUl[0].style.transition=""
// }
// a++
// oUl[0].style.left=-(a+1)*arrLi[a].offsetWidth+"px"
// oUl[0].style.transition="2s ease"
// for (var i = 0; i < arrBall.length; i++) {
// arrBall[i].className=""
// }
// if(a>2){
// arrBall[0].className="act"
// }
// else{
// arrBall[a].className="act"
// }
// setTimeout(function(){
// kai=true},2000)}
// },2000 )
oUl[0].style.transition=""
var k=0
for (var i = 0; i < arrBall.length; i++) {
arrBall[i].index=i
arrBall[i].onclick=function(){
for (var j = 0; j < arrBall.length; j++) {
arrBall[j].className=""
}
oUl[0].style.left=-(this.index+1)*arrLi[1].offsetWidth+"px"
oUl[0].style.transition="0.5s ease"
this.className="act"
k=this.index
}
}
两种写法都可以用 第一种相对简单很多,但是第二种可以获取元素下标志,一些轮播图会有索引标签,第二种方法可以加索引