16、做一个简陋的轮播图
2019-08-21 本文已影响2人
宁公子_5dce
做一个简单的轮播图所需要用到的知识:
HTML+CSS
先前所学到的JS内容:
1、函数的应用：
function 函数名() {
执行的代码
}
2、if判断或三目运算等判断语句：
if(判断条件){
执行的代码
}else{
执行的代码
}
3、对象的应用：
- 对象属性的添加修改即查询
- 有一颗将一切都看作对象的心
4、定时器的应用：
创建一个定时器：var 变量名 = setInterval(执行的代码，循环周期)
关闭一个定时器：clearInterval(定时器的变量名)
5、DOM查询和修改：
查询元素节点的方法如： - document.querySelector()
- document.querySelectorAll()
- document.getElementById()
修改元素属性的方法： - 获取得到的元素都是对象，他们的属性也是按照对象属性的方法来修改
- 得到的style属性也是一个对象，所有style对象身上有着样式属性
- css命名法和js不通用，所以将横杠命名都转为驼峰式命名法如：font-size 改为 fontSize
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 400px;height: 200px;border: 2px solid black;overflow: hidden;
position:relative;margin:200px auto;box-shadow: 0px 0px 5px red;
}
#list{
height: 100%;
position: absolute;top: 0;
}
.img{
width: 400px;height: 100%;float: left;
font-size: 50px;text-align: center;color: #fff;line-height: 200px;
}
.btn{
width: 40px;height: 100px;
position: absolute;top: 50%;transform: translateY(-50%);
background: rgba(0,0,0,0.5);
}
.left{
left: 0px;
}
.right{
right: 0px;
}
</style>
</head>
<body>
<div id="box">
<div id="list">
<div class="img"style="background: purple;">3</div>
<div class="img"style="background: red;">1</div>
<div class="img"style="background: black;">2</div>
<div class="img"style="background: purple;">3</div>
<div class="img"style="background: red;">1</div>
</div>
<button class="btn left">向左</button>
<button class="btn right">向右</button>
</div>
<script>
function $(selector){
return document.querySelectorAll(selector);
};
//获取元素节点
var right = $(".right")[0],list = $("#list")[0],left = $(".left")[0],il = $(".img").length-1;
//设置两个变量用来控制图片切换
var i = 1,j = 400;
//设置list的宽度和初识图片的位置
list.style.width=(il+1)*400+"px";
list.style.left="-400px";
//设置一个变量预留给定时器
var timeRight = null;
right.onclick = function(){
i = i>=il? 0 : ++i;//用来检查切换到了第几张图片,设置其位置
console.log(i)
clearInterval(timeRight);
timeRight = setInterval(function(){
if (j<400*i) {
j++;
list.style.left=-j+"px";
}else if (400*i ==il*400 ) {//若是切换到最后一张图片,使其转为第一张
j = 400,i = 1;
list.style.left=-j+"px";
}
},3);
}
left.onclick = function(){
i = i<=0? il : --i;
clearInterval(timeRight);
timeRight = setInterval(function(){
if(j>400*i) {
j--;
list.style.left=-j+"px";
}else if (400*i == 0) {//若是转为第一张图片前,则转为最后一张图片
j = 400*(il-1),i = il-1;
list.style.left=-j+"px";
}
},3)
}
</script>
</body>
</html>
