JavaScript-渐隐轮播图分解(上)
JavaScript-渐隐轮播图
一、实现轮播图的点击按钮切换功能(上)
知识点
1.div布局
2.点击事件
3.foreach()函数用法
swipe.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.swiper {
width: 1226px;
height: 460px;
margin: 0 auto;
position: relative;
}
.swiper .imaglist {
position: relative;
width: 1226px;
height: 460px;
}
.swiper .imaglist .imagitem {
width: 1226px;
height: 460px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: all 0.6s;
background-size: 1226px auto;
}
.swiper .imaglist .active {
opacity: 1;
}
.swiper .btnlist {
width: 41px;
height: 69px;
}
.swiper .btnlist .btn {
width: 41px;
height: 69px;
background-color: rgb(134, 125, 126, 0);
font-family: "宋体";
font-size: 50px;
line-height: 69px;
color: darkgray;
text-align: center;
transition: all 0.2s;
}
.swiper .btnlist .btn:hover {
background-color: rgb(134, 125, 126, 1);
}
.swiper .btnlist .leftbtn {
position: absolute;
top: 40%;
left: 0;
}
.swiper .btnlist .rightbtn {
position: absolute;
top: 40%;
right: 0;
}
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Documenttitle>
<link rel="stylesheet" href="../css/swiper.css" />
head>
<body>
<div class="swiper">
<div class="imaglist">
<div class="imagitem bg1 active">div>
<div class="imagitem bg2 ">div>
<div class="imagitem bg3">div>
div>
<div class="btnlist">
<div class="btn leftbtn">
<
div>
<div class="btn rightbtn">
>
div>
div>
div>
<script>
var swiper = document.querySelectorAll(".imaglist .imagitem");
var leftbtn = document.querySelector(".leftbtn");
var rightbtn = document.querySelector(".rightbtn");
var imagcount = 0;
rightbtn.onclick = function() {
imagcount = imagcount + 1;
if (imagcount >= swiper.length) {
imagcount = 0;
}
xuanran();
};
leftbtn.onclick = function() {
imagcount = imagcount - 1;
if (imagcount < 0) {
//0 -1 -2 3
imagcount = swiper.length - 1;
}
xuanran();
};
function xuanran() {
swiper.forEach(function(item, index) {
item.classList.remove("active");
});
swiper[imagcount].classList.add("active");
}
script>
body>
html>
二、实现轮播图点击圆点跳转页面功能(中)
需求
1.实现点击圆点跳转页面
2.点击按钮，对应的圆点会改变
swipe.css 加入
.circlelist {
width: 100%;
height: 21px;
display: flex;
justify-content: flex-end;
padding-bottom: 30px;
padding-right: 15px;
align-items: center;
position: absolute;
right: 0;
bottom: 0;
}
.circlelist .circle {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid #999;
background: #666;
margin: 5px;
}
.circlelist .circle.active {
background-color: #ccc;
border: 2px solid #666;
}
body 加入
<div class="circlelist">
<div id="d0" class="circle active">div>
<div id="d1" class="circle">div>
<div id="d2" class="circle">div>
div>
var swiper = document.querySelectorAll(".imaglist .imagitem");
var leftbtn = document.querySelector(".leftbtn");
var rightbtn = document.querySelector(".rightbtn");
var circle = document.querySelectorAll(".circle");
var imagcount = 0;
rightbtn.onclick = function() {
imagcount = imagcount + 1;
if (imagcount >= swiper.length) {
//0 1 2 3
imagcount = 0;
}
xuanran();
};
leftbtn.onclick = function() {
imagcount = imagcount - 1;
if (imagcount < 0) {
//0 -1 -2 3
imagcount = swiper.length - 1;
}
xuanran();
};
circle.forEach(function(item, index) {
item.onclick = function() {
var i = parseInt(item.id[1]);
imagcount = i;
xuanran();
};
});
// for(var i = 0;i
// circle[i].onclick = function(){
// imagcount = i;//传入i内部的一直是一个固定值
// xuanran();
// }
// }
//立即执行函数
// for(var i = 0;i
// circle[i].onclick = (function(index){
// return function(){
// imagcount = index;
// xuanran();
// }
// })(i)
// }
function xuanran() {
console.log(imagcount);
swiper.forEach(function(item, index) {
item.classList.remove("active");
});
circle.forEach(function(item, index) {
item.classList.remove("active");
});
swiper[imagcount].classList.add("active");
circle[imagcount].classList.add("active");
}
//通过事件代理完成小圆点的功能
// var circlelist = document.querySelector(".circlelist")
// circle.onclick = function(event){
// if(event.target.classList.contains(".circlelist")){
// var i = parseInt(event.target.id[1]);
// imagcount = i;
// xuanran();
// }
// }
完整代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Documenttitle>
head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.swiper {
width: 1226px;
height: 460px;
margin: 0 auto;
position: relative;
}
.swiper .imaglist {
position: relative;
width: 100%;
height: 460px;
}
.swiper .imaglist .imagitem {
width: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: all 0.6s;
}
.swiper .imaglist .active {
opacity: 1;
}
.bg1 {
background-image: url("./imag/mi1.jpg");
}
.bg2 {
background-image: url("./imag/mi2.jpg");
}
.bg3 {
background-image: url("./imag/mi3.png");
}
.bg1,
.bg2,
.bg3 {
width: 1226px;
height: 460px;
background-repeat: no-repeat;
background-position: center center;
background-size: 1226px auto;
}
.swiper .btnlist {
width: 41px;
height: 69px;
}
.swiper .btnlist .btn {
width: 41px;
height: 69px;
background-color: rgb(134, 125, 126, 0);
font-family: "宋体";
font-size: 50px;
line-height: 69px;
color: darkgray;
text-align: center;
transition: all 0.2s;
}
.swiper .btnlist .btn:hover {
background-color: rgb(134, 125, 126, 1);
}
.swiper .btnlist .leftbtn {
position: absolute;
top: 40%;
left: 0;
}
.swiper .btnlist .rightbtn {
position: absolute;
top: 40%;
right: 0;
}
.circlelist {
width: 100%;
height: 21px;
display: flex;
justify-content: flex-end;
padding-bottom: 30px;
padding-right: 15px;
align-items: center;
position: absolute;
right: 0;
bottom: 0;
}
.circlelist .circle {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid #999;
background: #666;
margin: 5px;
}
.circlelist .circle.active {
background-color: #ccc;
border: 2px solid #666;
}
style>
<body>
<div class="swiper">
<div class="imaglist">
<div class="imagitem bg1 active">div>
<div class="imagitem bg2 ">div>
<div class="imagitem bg3">div>
div>
<div class="btnlist">
<div class="btn leftbtn">
<
div>
<div class="btn rightbtn">
>
div>
div>
<div class="circlelist">
<div id="d0" class="circle active">div>
<div id="d1" class="circle">div>
<div id="d2" class="circle">div>
div>
div>
<script>
var swiper = document.querySelectorAll(".imaglist .imagitem");
var leftbtn = document.querySelector(".leftbtn");
var rightbtn = document.querySelector(".rightbtn");
var circle = document.querySelectorAll(".circle");
var imagcount = 0;
rightbtn.onclick = function() {
imagcount = imagcount + 1;
if (imagcount >= swiper.length) {
//0 1 2 3
imagcount = 0;
}
xuanran();
};
leftbtn.onclick = function() {
imagcount = imagcount - 1;
if (imagcount < 0) {
//0 -1 -2 3
imagcount = swiper.length - 1;
}
xuanran();
};
circle.forEach(function(item, index) {
item.onclick = function() {
var i = parseInt(item.id[1]);
imagcount = i;
xuanran();
};
});
function xuanran() {
console.log(imagcount);
swiper.forEach(function(item, index) {
item.classList.remove("active");
});
circle.forEach(function(item, index) {
item.classList.remove("active");
});
swiper[imagcount].classList.add("active");
circle[imagcount].classList.add("active");
}
script>
body>
html>
三、实现轮播图轮播功能(下)
知识点
setInterval()
那这个延迟函数咋用呀
比如
setInterval（）：有两个参数，第一个是执行的js代码，第二个是执行的间隔时间。 setInterval()
方法会不停地调用函数（重复执行其内容），直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的
ID 值可用作 clearInterval() 方法的参数。 与其对应的就是 clearInterval（）结束重复执行。
var time = new Date();
setInterval(function(){
console.log(time)
})
js中我们可以加入这样一行代码
//时间函数轮播
setInterval(function() {
imagcount++;
if (imagcount >= swiper.length) {
imagcount = 0;
}
xuanran();
}, 6000);