将用原生js写的轮播图进行数据化和组件化

本文链接：https://blog.csdn.net/weixin_43532998/article/details/104735540

将用原生js写的轮播图进行数据化和组件化

在上次轮播图的基础上进行了数据化和组件化,如有不足之处,还请大家多指导指导

1、 HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/lunbo.css">
</head>
<body>
<div id="main"> </div>
<script src="./js/lunbo.js"></script>
<script>
//这个数据通常是后台请求回来的数据
//图片地址也可以用网上图片的链接
var imgsData = {imgs:[{
index: 0,
url: './img/1.jpg',
title: '图片一'
},
{
index: 1,url: './img/2.jpg',
title: '图片二'
},
{
index: 2,
url: './img/3.jpg',
title: '图片三'
},
{
index: 3,
url: './img/4.jpg',
title: '图片四'
},
{
index: 4,
url: './img/5.jpg',
title: '图片五'
},
]
};
slideshow.renderer("main",imgsData);
</script>
</body>
</html>

2、js部分

var XZLunBo = {
//轮播图的当前索引
currentIndex: 0,
//主方法
renderer(content,myImgsData){
//使用数据初始化页面
this.initPage(content,myImgsData);
//启动轮播图
this.start();
},
//初始化渲染页面
initPage(content,myImgsData){
//一下都是在主动创建元素节点，并进行拼装
var content = document.getElementById(content);
content.setAttribute("class",'content');
//两个按钮
var leftspan = document.createElement("span");
leftspan.setAttribute("class",'change left');
leftspan.id ='pre';
leftspan.innerText ="<"
var rightSpan = document.createElement("span");
rightSpan.setAttribute("class",'change right');
rightSpan.id ='next';
rightSpan.innerText =">"
//图片列表
var contentList = document.createElement("ul");
contentList.setAttribute("class",'contentList');
contentList.id ='contentList';
//小圆点
var canvas = document.createElement("div");
canvas.setAttribute("class",'canvas');
var contentCircle = document.createElement("ul");
contentCircle.setAttribute("class",'contentCircle');
contentCircle.id ='contentCircle';
canvas.appendChild(contentCircle);
//将创建的新元素进行拼装
content.appendChild(leftspan);
content.appendChild(rightSpan);
content.appendChild(contentList);
content.appendChild(canvas);
//去创建图片和小圆点
var contentList = document.getElementById("contentList");
var contentCircle = document.getElementById("contentCircle");
for( var i = 0 ; i < myImgsData.imgs.length ; i++ ){
var myli = document.createElement("li")
var myImg = document.createElement("img");
myImg.setAttribute("src"
,myImgsData.imgs[i].url);
myImg.setAttribute("title"
,myImgsData.imgs[i].title);
myImg.setAttribute('data-index'
,myImgsData.imgs[i].index);
myli.appendChild(myImg);
contentList.appendChild(myli);
var mylic = document.createElement("li");
contentCircle.appendChild(mylic);
}
},
//轮播图启动
start(){
var preImg = document.getElementById("pre");
var nextImg = document.getElementById("next");
var cricles = document.querySelectorAll("#contentCircle li");
//这是一个难点，回调函数会改变一个this的指向
var that = this;
//显示第一张图片和第一个小圆点
this.ininFirst();
//为每一个小圆点绑定事件
for ( var j = 0 ; j < cricles.length ; j++ ){
cricles[j].addEventListener('click',function(event){
that.currentIndex = Number(event.target.getAttribute('dataindex'));
that.showImg();
});
}
//点击上一张的操作
preImg.addEventListener('click',function(){
that.goPre();
})
//点击下一张的操作
nextImg.addEventListener('click',function(){
that.goNext();
})
//根据图片的下标显示图片
setInterval(function(){
that.goNext();
},3000)
},
//初始化小圆点，并显示第一张图片和第一个小圆点
ininFirst(){
var cricles = document.querySelectorAll("#contentCircle li");
//给每个小圆点增加一个索引数据
for ( var j = 0 ; j < cricles.length ; j++ ){
cricles[j].setAttribute("data-index",j);
}
//让第一张图片和第一个圆点显示
this.showImg();
},
//显示下一张的方法
goNext(){
debugger;
var imgs = document.querySelectorAll("#contentList li");
this.currentIndex ++;
if( this.currentIndex == imgs.length ){
this.currentIndex = 0;
}
this.showImg();
},
//显示上一张的方法
goPre(){
var imgs = document.querySelectorAll("#contentList li");
this.currentIndex --;
if( this.currentIndex == -1 ){
this.currentIndex = imgs.length-1;
}
this.showImg();
},
//展示当前编号的图片
showImg(){
var imgs = document.querySelectorAll("#contentList li");
for( var i = 0 ; i < imgs.length; i++ ){
if( i === this.currentIndex ){
imgs[i].setAttribute('class','active');
}else{
imgs[i].removeAttribute('class');
}
}
var cricles = document.querySelectorAll("#contentCircle li");
for( var i = 0 ; i < cricles.length; i++ ){
if( i === this.currentIndex ){
cricles[i].setAttribute('class','activec');
}else{
cricles[i].removeAttribute('class');
}
}
}