代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
.window{
height: 500px;
width: 800px;
overflow: hidden;
position: relative;
}
.content{
/* position: absolute; */
height: 500px;
width: 4000px;
}
img{
float: left;
/* 宽度不够自动换行所以要设置.content的值 */
height: 100%;
width: 800px;
}
</style>
</head>
<body>
<div class="window">
<ul class="content">
<img src="../6.简单左右轮播图/lunbo1.png" alt="">
<img src="../6.简单左右轮播图/lunbo2.png" alt="">
<img src="../6.简单左右轮播图/lunbo3.png" alt="">
<img src="../6.简单左右轮播图/lunbo4.png" alt="">
<img src="../6.简单左右轮播图/lunbo1.png" alt="">
</ul>
</div>
<script>
var imgs=document.querySelectorAll('img')
var ul=document.querySelector('ul')
var index=0;
var len=imgs.length-1;/* 未减1则滑动到空白 */
var timer=setInterval(function(){
if(index<len){
console.log(1);
index++;
function move(){/* 这是创建函数 */
ul.style.marginLeft='-'+index * 800 +'px';/* 负号也是字符串 */
ul.style.transition=0.3+'s'
}
move();/* 这是调用函数 */
}
else{
console.log(2);
index=0;
function rehead(){
ul.style.marginLeft=0+'px';
ul.style.transition=0+'s';
}
rehead()
}
},3000)
</script>
</body>
</html>
注意事项:
1.function 函数名(){}只是定义函数,还需要用函数名()来调用
2.负号也是字符串
3.其他注意事项写在了注释里