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

- 日理万妓 2023-07-12 11:55 9阅读 0赞

# 将用原生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');
    }
    }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS 原生手写轮播图

只是实现了原生JS实现轮播图的逻辑和具体实现代码，css样式并未进行美化实现了以下功能 (1) 点击容器container下方小圆点可以进行切换 (2) 点击左右的

不念不忘少年蓝@/ 2023年10月11日 22:08/ 0 赞/ 11 阅读

相关 js原生轮播图

1.先画轮播图片样式 2.再画轮播按钮 3.样式完成，写js代码 4.获取所有节点 <!DOCTYPE html> <html> <head> <t

灰太狼/ 2023年08月17日 15:59/ 0 赞/ 148 阅读

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

将用原生js写的轮播图进行数据化和组件化在上次轮播图的基础上进行了数据化和组件化,如有不足之处,还请大家多指导指导 1、 HTML部分 <!DOCTYP

- 日理万妓/ 2023年07月12日 11:55/ 0 赞/ 10 阅读

相关 js原生轮播图

window.addEventListener('load', function() { // 1. 获取元素

不念不忘少年蓝@/ 2023年07月07日 08:22/ 0 赞/ 4 阅读

相关用原生js实现轮播图

今天分享一下简单的轮播图制作过程，用原生js实现。虽然网上有各种插件制作的高大上又好用的轮播图，但还是要清楚它的基本原理。 1.基本原理将所有图片并排放到一个div中，然

清疚/ 2022年06月17日 13:11/ 0 赞/ 256 阅读

相关使用原生js将轮播图组件化

> 代码地址如下： > [http://www.demodashi.com/demo/11316.html][http_www.demodashi.com_demo_113

r囧r小猫/ 2022年05月30日 04:19/ 0 赞/ 168 阅读

相关使用原生js将轮播图组件化

> 代码地址如下： > [http://www.demodashi.com/demo/11316.html][http_www.demodashi.com_demo_113

矫情吗；*/ 2022年05月30日 03:06/ 0 赞/ 127 阅读

相关原生js轮播图

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

Bertha 。/ 2022年05月28日 12:21/ 0 赞/ 257 阅读

相关用原生JS实现旋转轮播图

html代码 <div class="wrap" id="wrap"> <div class="slide" id="slide">

一时失言乱红尘/ 2022年05月27日 11:52/ 0 赞/ 210 阅读

相关用js原生代码写轮播

本文是用js原生代码写轮播，为自己的难点做一次总结，主要是借鉴老师，而后自己写来了供自己参考。所以要写轮播图先要写好自己想要的html样式如图一所示 ![在这里插入图

左手的ㄟ右手/ 2022年03月17日 01:19/ 0 赞/ 174 阅读