轮播图简单实现
1、开始步骤
-
构建目录结构
-
罗列元素,元素较多的情况下,一边写元素一边写样式
-
写js
2、简单实现轮播图
<!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/index.css">
</head>
<body>
<div class="content" id="content">
<span class="change left" id="pre"><</span>
<span class="change right" id="next">></span>
<ul class="contentList" id="contentList">
<li><img src="./img/1.jpg"></li>
<li><img src="./img/2.jpg"></li>
<li><img src="./img/3.jpg"></li>
<li><img src="./img/4.jpg"></li>
<li><img src="./img/5.jpg"></li>
</ul>
<div class="canvas">
<ul class="contentCircle" id="contentCircle">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>
.content{
width: 500px;
height: 300px;
border: 1px solid black;
margin: 30px auto;
position: relative;;
}
.contentList li{
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
/* opacity 设置透明度 */
opacity: 0;
}
.contentList li img{
width: 100%;
height: 100%;
}
.active{
z-index: 9;
/* !important 权重 */
opacity: 1!important;
/* transition 设置动画 */
transition: all 1.5s;
}
.change{
width: 20px;
height: 30px;
background-color: gray;
display: block;
z-index: 10;
position: absolute;
top: 125px;
font-size: 20px;
cursor: pointer;
text-align: center;
line-height: 30px;
}
.right{
right: 0;
}
.canvas{
width: 100%;
height: 50px;
background-color: #212121;
opacity: 0.4;
position: absolute;
left: 0;
bottom: 0;
z-index: 10;
}
.contentCircle{
margin: auto;
height: 50px;
width: 100px;
}
.contentCircle li{
display: inline-block;
margin: 0 auto;
border-radius: 50px;
width: 10px;
height: 10px;
border: 1px solid white;
margin-left: 4px;
margin-top: 18px;
cursor: pointer;
}
.activec{
background-color: yellow;
}
var imgs = document.querySelectorAll("#contentList li");
var preImg = document.getElementById("pre")
var nextImg = document.getElementById("next")
var cricles = document.querySelectorAll("#contentCircle li");
for(var j = 0;j<cricles.length;j++){
cricles[j].setAttribute('data-index',j)
}
var currentIndex = 0;
showImg();
//点击上一张
preImg.addEventListener('click',function(event){
goPre();
})
//点击下一张
nextImg.addEventListener('click',function(event){
goNext();
})
function goNext(){
currentIndex ++;
if(currentIndex == imgs.length){
currentIndex = 0
}
showImg();
}
function goPre(){
currentIndex --;
if(currentIndex == -1){
currentIndex = imgs.length-1
}
showImg();
}
//给圆点添加点击事件 当点击第几个圆点时 去第几张图片
for(var j = 0;j<cricles.length;j++){
cricles[j].addEventListener('click',function(event){
currentIndex = Number(event.target.getAttribute('data-index'));
showImg();
})
}
//显示图片
function showImg(){
for(var i = 0; i < imgs.length; i++){
if(i === currentIndex){
imgs[i].setAttribute('class','active')
}else{
imgs[i].removeAttribute('class')
}
}
for(var i = 0; i < cricles.length; i++){
if(i === currentIndex){
cricles[i].setAttribute('class','activec')
}else{
cricles[i].removeAttribute('class')
}
}
}
//延时 每过3秒自动跳转
setInterval(function(){
goNext();
},3000)
3、轮播图 数据化
动态生成轮播图,可随意添加图片数量,或各类型的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="content" id="content">
<span class="change left" id="pre"><</span>
<span class="change right" id="next">></span>
<ul class="contentList" id="contentList">
</ul>
<div class="canvas">
<ul class="contentCircle" id="contentCircle">
</ul>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>
var imgData = {
imgs: [
//写自己图片的路径
{
index: 0,
url: './img/1.jpg',
title: 'zxcassaf'
},
{
index: 1,
url: './img/2.jpg',
title: 'zxdgsdfdasd'
},
{
index: 2,
url: './img/3.jpg',
title: 'sfsdfsad'
},
{
index: 3,
url: './img/4.jpg',
title: 'fghgfb'
},
{
index: 4,
url: './img/5.jpg',
title: 'egfgcvcxcas'
}
]
}
initLunBo(imgData);
//初始化轮播图
function initLunBo(myImgData) {
var contentList = document.getElementById('contentList');
var contentCircle = document.getElementById('contentCircle');
for (var i = 0; i < myImgData.imgs.length; i++) {
var myli = document.createElement("li");
var myImg = document.createElement("img");
myImg.setAttribute('src', myImgData.imgs[i].url);
myImg.setAttribute('titie', myImgData.imgs[i].titie);
myImg.setAttribute('data-Index',myImgData.imgs[i].index);
myli.appendChild(myImg);
contentList.appendChild(myli);
var mylic = document.createElement("li");
contentCircle.appendChild(mylic);
}
}
var imgs = document.querySelectorAll("#contentList li");
var preImg = document.getElementById("pre")
var nextImg = document.getElementById("next")
var cricles = document.querySelectorAll("#contentCircle li");
for (var j = 0; j < cricles.length; j++) {
cricles[j].setAttribute('data-index', j)
}
var currentIndex = 0;
showImg();
//点击上一张
preImg.addEventListener('click', function (event) {
goPre();
})
//点击下一张
nextImg.addEventListener('click', function (event) {
goNext();
})
function goNext() {
currentIndex++;
if (currentIndex == imgs.length) {
currentIndex = 0
}
showImg();
}
function goPre() {
currentIndex--;
if (currentIndex == -1) {
currentIndex = imgs.length - 1
}
showImg();
}
//给圆点添加点击事件 当点击第几个圆点时 去第几张图片
for (var j = 0; j < cricles.length; j++) {
cricles[j].addEventListener('click', function (event) {
currentIndex = Number(event.target.getAttribute('data-index'));
showImg();
})
}
//显示图片
function showImg() {
for (var i = 0; i < imgs.length; i++) {
if (i === currentIndex) {
imgs[i].setAttribute('class', 'active')
} else {
imgs[i].removeAttribute('class')
}
}
for (var i = 0; i < cricles.length; i++) {
if (i === currentIndex) {
cricles[i].setAttribute('class', 'activec')
} else {
cricles[i].removeAttribute('class')
}
}
}
setInterval(function () {
goNext();
}, 3000)
css样式不变
4、轮播图 组件化
将轮播图封装成为组件,直接用一句话调用 方便快捷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="xxxxx">
</div>
<script src="./js/index.js"></script>
<script>
var imgData = {
imgs: [
{
index: 0,
url: './img/1.jpg',
title: 'zxcassaf'
},
{
index: 1,
url: './img/2.jpg',
title: 'zxdgsdfdasd'
},
{
index: 2,
url: './img/3.jpg',
title: 'sfsdfsad'
},
{
index: 3,
url: './img/4.jpg',
title: 'fghgfb'
},
{
index: 4,
url: './img/5.jpg',
title: 'egfgcvcxcas'
}
]
}
XZLunBo.renderer("xxxxx",imgData)
</script>
</body>
</html>
var XZLunBo = {
currentIndex: 0,
//渲染页面
renderer: function (content, myImgData) {
this.initPage(content,myImgData);
this.start();
},
start: function () {
//由于下面用到很多 回调函数 导致多层函数 以至于用this 获取不到想要的东西
var that = this;
//通过id‘pre’获取元素
var preImg = document.getElementById("pre")
//通过id‘next’获取元素
var nextImg = document.getElementById("next")
var cricles = document.querySelectorAll("#contentCircle li");
//为小圆点添加自定义属性
for (var j = 0; j < cricles.length; j++) {
cricles[j].setAttribute('data-index', j)
}
this.showImg();
//点击上一张
preImg.addEventListener('click', function (event) {
that.goPre();
})
//点击下一张
nextImg.addEventListener('click', function (event) {
that.goNext();
})
//给圆点添加点击事件 当点击第几个圆点时 去第几张图片
for (var j = 0; j < cricles.length; j++) {
cricles[j].addEventListener('click', function (event) {
that.currentIndex = Number(event.target.getAttribute('data-index'));
that.showImg();
})
}
//定时器 每过3秒切换下一张图片
setInterval(function () {
that.goNext();
}, 3000)
},
//初始化页面
initPage: function(content,myImgData){
var content = document.getElementById(content);
content.setAttribute('class', 'content');
//添加span标签的class 和 id属性
var left = document.createElement("span");
left.setAttribute('class', 'change left')
left.id = 'pre';
left.innerText = '<'
var right = document.createElement("span");
right.setAttribute('class', 'change right')
right.id = 'next';
right.innerText = '>'
//添加ul标签
var contentList = document.createElement('ul');;
contentList.setAttribute('class', 'contentList');
contentList.id = 'contentList';
//添加div
var canvas = document.createElement('div');
canvas.setAttribute('class', 'canvas');
//添加ul
var contentCircle = document.createElement('ul');
contentCircle.setAttribute('class', 'contentCircle');
contentCircle.id = 'contentCircle';
canvas.appendChild(contentCircle);
content.appendChild(left);
content.appendChild(right);
content.appendChild(contentList);
content.appendChild(canvas);
//添加图片和小圆点
var contentList = document.getElementById('contentList');
var contentCircle = document.getElementById('contentCircle');
for (var i = 0; i < myImgData.imgs.length; i++) {
var myli = document.createElement("li");
var myImg = document.createElement("img");
myImg.setAttribute('src', myImgData.imgs[i].url);
myImg.setAttribute('titie', myImgData.imgs[i].titie);
myImg.setAttribute('data-Index', myImgData.imgs[i].index);
myli.appendChild(myImg);
contentList.appendChild(myli);
var mylic = document.createElement("li");
contentCircle.appendChild(mylic);
}
},
//去下一张
goNext: function () {
var imgs = document.querySelectorAll("#contentList li");
this.currentIndex++;
if (this.currentIndex == imgs.length) {
this.currentIndex = 0
}
this.showImg();
},
//去上一张
goPre: function () {
var imgs = document.querySelectorAll("#contentList li");
this.currentIndex--;
if (this.currentIndex == -1) {
this.currentIndex = imgs.length - 1
}
this.showImg();
},
//显示图片
showImg: function () {
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')
}
}
}
}