js原生轮播图插件制作

本文实例为大家分享了js原生轮播图插件制作的具体代码,供大家参考,具体内容如下

调用时也只需要写一个DIV即可

调用的js部分配置内容:

传入轮播图需显示的位置(div)

传入图片和点击跳转的链接

话不多说,上代码

HTML

<div id="banner"></div>

HTML文档内的<script>,这里是轮播图的配置内容,一共两个参数,第一个是需要传入的DIV(轮播图所显示的区域),第二个参数是一个数组,数组里的元素是一个个对象,对象里第一个属性imgUrl表示图片,第二个属性link表示跳转链接

一个数组元素就是一张图片,不限数量,可自适应

<script>
        bannerArea(document.getElementById("banner"),[
            {imgUrl:"图片",
            link:"跳转链接"
        },
            {imgUrl:"图片",
            link:"跳转链接"
        },
            {imgUrl:"图片",
            link:"跳转链接"
        }
        ])
</script> 

JS插件内容

// 两个参数,第一个轮播图区域,第二个是配置
function bannerArea(areaDom, options) {
    var imgArea = document.createElement("div");
    var numberArea = document.createElement("div");
    var curIndex = 0;//第几张轮播图
    var changeTimer = null;
    var changeDuration = 1000;//间隔
    var timer = null;

    initImg();//创建一个区域来显示图片

    initNumber();//创建区域显示角标

    setStatus();//设置状态

    autoChange();//自动切换

    //下面是局部函数

    //创建图片,并且设置样式
    function initImg() {
        imgArea.style.width = "100%";
        imgArea.style.height = "100%";
        imgArea.style.display = "flex";
        imgArea.style.overflow = "hidden";
        for (let i = 0; i < options.length; i++) {
            var obj = options[i];
            var img = document.createElement("img");
            img.src = obj.imgUrl;
            img.style.width = "100%";
            img.style.height = "100%";
            img.style.margin = "0";
            img.addEventListener("click", function () {
                location.href = options[i].link;
            })
            imgArea.appendChild(img);
        }
        imgArea.addEventListener("mouseenter", function () {
            clearInterval(changeTimer);
            changeTimer = null;
        })
        imgArea.addEventListener("mouseleave", function () {
            autoChange();
        })
        areaDom.appendChild(imgArea);
    }
    //创建角标元素和设置样式
    function initNumber() {
        numberArea.style.textAlign = "center";
        numberArea.style.marginTop = "-25px";
        for (let i = 0; i < options.length; i++) {
            var sp = document.createElement("span");
            sp.style.width = "12px";
            sp.style.height = "12px";
            sp.style.background = "lightgray";
            sp.style.display = "inline-block";
            sp.style.margin = "0 7px";
            sp.style.borderRadius = "50%";
            sp.style.cursor = "pointer";
            sp.addEventListener("click", function () {
                curIndex = i;
                setStatus();
            })
            numberArea.appendChild(sp);
        }
        areaDom.appendChild(numberArea);
    }

    //设置角标区域状态
    function setStatus() {
        //设置圆圈的背景颜色
        for (var i = 0; i < options.length; i++) {
            if (i === curIndex) {
                //设置背景颜色为选择
                numberArea.children[i].style.background = "rgb(222 57 57)";
            } else {
                //非选择
                numberArea.children[i].style.background = "lightgray";;
            }

        }
        //显示图片
        var start = parseInt(imgArea.children[0].style.marginLeft);
        var end = curIndex * -100;
        var dis = end - start;
        var duration = 500;
        var speed = dis / duration;
        if (timer) {
            clearInterval(timer);
        }
        timer = setInterval(function () {
            start += speed * 20;
            imgArea.children[0].style.marginLeft = start + "%";
            if (Math.abs(end - start) < 1) {
                imgArea.children[0].style.marginLeft = end + "%";
                clearInterval(timer);
            }
        }, 20)
    }
    //自动切换
    function autoChange() {
        if (changeTimer) {
            return;
        }
        changeTimer = setInterval(function () {
            if (curIndex === options.length - 1) {
                curIndex = 0;
            } else {
                curIndex++;
            }
            setStatus();
        }, changeDuration)
    }

}

轮播图速度(切换时间)可在插件代码中    var changeDuration = 1000;//间隔   一句里调整

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • js实现支持手机滑动切换的轮播图片效果实例

    本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

  • 原生JS轮播图插件

    代码分两个部分:1.HTML部分,根据注释处理即可:2.play.js插件部分,引到HTML里面即可. 1.HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style>/*style标签及其内的内容,在实际项目中可以不要*/ * { margin: 0; p

  • js实现无缝轮播图插件封装

    前言:页面中轮播图,对于一个前端开发者来说,是最基本的技能,不论是的商城网站,还是企业站,轮播图已经成为不可缺少的一个模块,而常见的轮播图不外乎两种,一种是渐隐渐现轮播图,一种是无缝轮播图.网上关于轮播图的件也有很多,但是用人家的代码总会出现各种各样的bug,我们修改bug往往要耗费很多时间,而且有些插件的效果还不符合我们的需求,那么我们该如何封装一个自己的轮播插件呢?这就是我们今天的任务,封装轮播插件. 1.特效离不开合理的页面布局,所以我们首先需要进行页面布局: HTML代码: <div c

  • Swiper.js插件超简单实现轮播图

    Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.超好用 话不多说,直接上教程 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件.可下载Swiper文件或使用CDN. <!-- Link Swiper--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com

  • js轮播图的插件化封装详解

    本文实例为大家分享了js轮播图的插件化封装代码,供大家参考,具体内容如下 具体代码如下: ~function(){ function AutoBanner(curEleId,ajaxURL,interval){ //把之前存储获取元素的变量都作为当前实例的私有属性 this.banner = document.getElementById(curEleId); this.bannerInner = utils.firstChild(this.banner); this.bannerTip = u

  • js实现轮播图的完整代码

    今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner"> <!-- 相框-->

  • js实现点击左右按钮轮播图片效果实例

    本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un

  • JS实现左右无缝轮播图代码

    废话不多说了,直接给大家贴代码了. 无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolu

  • 原生js实现轮播图的示例代码

    很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea

  • JS轮播图实现简单代码

    本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下 思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播

随机推荐