当前位置：网站首页>By figure, a (complete code at the end)
By figure, a (complete code at the end)
2022-08-02 04:00:00 【yorup】
01 Start by writing out the basic label layout,这里用父级divNested childrenul和div标签.ulis to store pictures,子级divIs the parent of the dot navigationdiv.代码如下：
<div class="banner">
<ul class="imglist">
<li><img src="./banner/1.png" alt=""></li>
<li><img src="./banner/2.jpg" alt=""></li>
<li><img src="./banner/3.jpg" alt=""></li>
<li><img src="./banner/4.jpg" alt=""></li>
</ul>
<div class="cir"></div>
</div>02 Make a basic layout,css代码如下：
The first step is to clear the possible inner and outer margins,然后进行布局
*{
padding: 0px;
margin: 0px;
}
/* The style of the visible border */
.banner{
width: 600px;
height: 350px;
margin: auto;
border: 10px solid #999;
position: relative;
overflow: hidden;
}
/* ul标签的样式 */
.imglist{
position: absolute;
}
li{
list-style: none;
margin-right: 10px;
float: left;
}
img{
width: 600px;
height: 350px;
}
/* Dot navigation parentdiv标签的样式 */
.cir{
position: absolute;
left: 50%;
bottom: 15px;
transform: translateX(-50%);
}
/* Dot navigation settings */
.cir a{
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: green;
margin-right: 10px;
float: left;
}
/* Dot navigation post-click style */
.cir a.hover{
background-color: black;
opacity: .5;
}03 编写javascript部分,First get the object,并定义变量
var banner = document.querySelector('.banner'); //Get the visible border
var imglist = document.querySelector(".imglist"); //获取ul标签
var cir = document.querySelector('.cir'); //Get the dot navigation parentdiv
var lis = imglist.children; //所有liThe labels are in a pseudo-array
var thisindex = 0;
var flag = true;04 在上面的css样式中,ulLabels don't have a width set,Here, the number of pictures is used to get the width,And add dot navigation with the number of pictures.代码如下：
//由图片widthand number of acquisitionsul的width
imglist.style.width = lis.length*610+'px'; //注意：01width是小写 02Don't forget to add units‘px’
//Add dot navigation according to the number of pictures
for (var i = 0; i < lis.length; i++) {
var anode = document.createElement('a'); //创建<a></a>
cir.appendChild(anode); //在父级div里面添加<a>
}05 Click event for dot navigation.The first line of code here is set for the effect of restoring dots after clicking,Explanations follow in the comments.
cir.children[0].classList.add('hover'); //The page must exist firsthover类
//Create dot navigationanode和ulCorrespondence of pictures
for(var i=0; i<lis.length; i++){
cir.children[i].setAttribute('index',i); //li添加自定义属性'index'
}
//Dot click event
cirClick();
function cirClick(){
cir.addEventListener('click',function(e){
if(e.target.nodeName != 'A'){
return false;
}
if(flag){ //节流阀
flag = false;
thisindex = e.target.getAttribute('index');
// imglist.style.left = -thisindex*610+'px';
move(imglist,-thisindex*610,function(){
flag = true;
})
cir.querySelector('.hover').classList.remove('hover'); //Restores the original style after each click on the dot（from grey to green）
e.target.classList.add('hover'); //Dot click style
}
})
}05 缓动函数,Realize the movement of the picture of the carousel（由快到慢）.
//缓动函数
var num = 0;
function move(box,target,callback){
box.myTime = setInterval(function(){
var osleft = box.offsetLeft; //这里是属性,不能加()
var num = (target-osleft) / 10;
num = num>0 ? Math.ceil(num):Math.floor(num);
if(osleft == target){
clearInterval(box.myTime);
callback && callback();
}else{
box.style.left = num+osleft+'px';
}
},30)
} 08 Implement automatic playback of carousel images
//自动轮播
auto();
function auto(){
setInterval(function(){
if(flag){
flag = false;
if(thisindex == lis.length){
thisindex = 0;
}
move(imglist,-thisindex*610,function(){
flag = true;
})
cir.querySelector('.hover').classList.remove('hover'); //Restores the original style after each click on the dot（from grey to green）
cir.children[thisindex].classList.add('hover');
thisindex++;
}
}, 2000);
}完整代码如下
in the complete code,After getting the object and defining the variable, put it allwindow.onload();函数中,Make the page load complete and then perform the carousel effect.
ps:If you have any questions, you can comment and we will reply.
<!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>轮播图</title>
<style>
*{
padding: 0px;
margin: 0px;
}
/* The style of the visible border */
.banner{
width: 600px;
height: 350px;
margin: auto;
border: 10px solid #999;
position: relative;
overflow: hidden;
}
/* ul标签的样式 */
.imglist{
position: absolute;
}
li{
list-style: none;
margin-right: 10px;
float: left;
}
img{
width: 600px;
height: 350px;
}
/* Dot navigation parentdiv标签的样式 */
.cir{
position: absolute;
left: 50%;
bottom: 15px;
transform: translateX(-50%);
}
/* Dot navigation settings */
.cir a{
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: green;
margin-right: 10px;
float: left;
}
/* Dot navigation post-click style */
.cir a.hover{
background-color: black;
opacity: .5;
}
</style>
</head>
<body>
<div class="banner">
<ul class="imglist">
<li><img src="./banner/1.png" alt=""></li>
<li><img src="./banner/2.jpg" alt=""></li>
<li><img src="./banner/3.jpg" alt=""></li>
<li><img src="./banner/4.jpg" alt=""></li>
</ul>
<div class="cir"></div>
</div>
<script>
var banner = document.querySelector('.banner'); //Get the visible border
var imglist = document.querySelector(".imglist"); //获取ul标签
var cir = document.querySelector('.cir'); //Get the dot navigation parentdiv
var lis = imglist.children; //所有liThe labels are in a pseudo-array
var thisindex = 0;
var flag = true;
window.onload = function(){
//由图片widthand number of acquisitionsul的width
imglist.style.width = lis.length*610+'px'; //注意：01width是小写 02Don't forget to add units‘px’
//Add dot navigation according to the number of pictures
for (var i = 0; i < lis.length; i++) {
var anode = document.createElement('a'); //创建<a></a>
cir.appendChild(anode); //在父级div里面添加<a>
}
cir.children[0].classList.add('hover'); //The page must exist firsthover类
//Create dot navigationanode和ulCorrespondence of pictures
for(var i=0; i<lis.length; i++){
cir.children[i].setAttribute('index',i); //li添加自定义属性'index'
}
//Dot click event
cirClick();
function cirClick(){
cir.addEventListener('click',function(e){
if(e.target.nodeName != 'A'){
return false;
}
if(flag){ //节流阀
flag = false;
thisindex = e.target.getAttribute('index');
// imglist.style.left = -thisindex*610+'px';
move(imglist,-thisindex*610,function(){
flag = true;
})
cir.querySelector('.hover').classList.remove('hover'); //Restores the original style after each click on the dot（from grey to green）
e.target.classList.add('hover'); //Dot click style
}
})
}
//自动轮播
auto();
function auto(){
setInterval(function(){
if(flag){
flag = false;
if(thisindex == lis.length){
thisindex = 0;
}
move(imglist,-thisindex*610,function(){
flag = true;
})
cir.querySelector('.hover').classList.remove('hover'); //Restores the original style after each click on the dot（from grey to green）
cir.children[thisindex].classList.add('hover');
thisindex++;
}
}, 2000);
}
//缓动函数
var num = 0;
function move(box,target,callback){
box.myTime = setInterval(function(){
var osleft = box.offsetLeft; //这里是属性,不能加()
var num = (target-osleft) / 10;
num = num>0 ? Math.ceil(num):Math.floor(num);
if(osleft == target){
clearInterval(box.myTime);
callback && callback();
}else{
box.style.left = num+osleft+'px';
}
},30)
}
}
</script>
</body>
</html>边栏推荐
猜你喜欢
随机推荐
[campo/random-user-agent]随机伪造你的User-Agent
(4) 函数、Bug、类与对象、封装、继承、多态、拷贝
[symfony/mailer]一个优雅易用的发送邮件类库
PHP 发起支付宝支付时 订单信息乱码解决
逍遥多开模拟器ADB驱动连接
PHP8.2 version release administrator and release plan
一个网络安全小白鼠的学习之路—nmap高级用法之脚本使用
PHP8.2中字符串变量解析的新用法
2.PHP变量、输出、EOF、条件语句
(8) requests、os、sys、re、_thread
After the mailbox of the Pagoda Post Office is successfully set up, it can be sent but not received.
MySql高级 -- 约束
(7) 浅学 “爬虫” 过程 (概念+练习)
Orasi: 1 vulnhub walkthrough
MOMENTUM: 2 vulnhub walkthrough
二维码生成API接口,可以直接作为A标签连接
(5) 模块与包、编码格式、文件操作、目录操作
Thread Pool (Introduction and Use of Thread Pool)
The roll call system and array elements find maximum and minimum values for sorting of objects
What are the killer super powerful frameworks or libraries or applications for PHP?