当前位置：网站首页>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>边栏推荐
猜你喜欢
12. What is JS
hackmyvm: may walkthrough
Several interesting ways to open PHP: from basic to perverted
What are the killer super powerful frameworks or libraries or applications for PHP?
(7) superficial "crawlers" process (concept + practice)
(2) Thinkphp6 template engine ** tag
攻防世界—MISC 新手区1-12
13.JS输出内容和语法
(1) print()函数、转义字符、二进制与字符编码 、变量、数据类型、input()函数、运算符
hackmyvm: again walkthrough
随机推荐
2. PHP variables, output, EOF, conditional statements
二维码生成API接口,可以直接作为A标签连接
[phpunit/php-timer] A timer for code execution time
TCP communications program
hackmyvm: juggling walkthrough
宝塔邮局邮箱设置成功后能发送不能接收问题处理
PHP有哪些杀手级超厉害框架或库或应用？
PHP realizes the automatic reverse search prompt of the search box
Function hoisting and variable hoisting
4. The form with the input
Multithreading (implementing multithreading, thread synchronization, producer and consumer)
What are the killer super powerful frameworks or libraries or applications for PHP?
Turn trendsoft/capital amount of Chinese capital library
Phpstudy安装Thinkphp6(问题+解决)
Phpstudy installs Thinkphp6 (problem + solution)
kali安装IDEA
hackmyvm-hopper walkthrough
Phonebook
Basic use of v-on, parameter passing, modifiers
PHP的几个有趣的打开方式:从基本到变态