JS实现轮播图案例

本文实例为大家分享了JS实现轮播图案例的具体代码,供大家参考,具体内容如下

实现功能:

1、自动轮播:鼠标停留在轮播图上时不切换图片,鼠标离开后自动轮播。

2、点击左右按钮切换图片。

3、点击下方按钮切换到对应的图片。

4、轮播图大小自适应:

可以放入到执行的父容器中展示。

不指定父容器时,默认放入body标签。占满一屏的宽度,当改变浏览器窗口大小时,轮播图大小成比例改变。

可以指定轮播图的宽高。

实现方式:用面向对象的方式实现,使用时传入图片和图片对应的数据,再创建实例。

import Carousel from './js/Carousel.js';
  var itemList1 = [{
                day: 26,
                date: "/Oct.2020",
                title: "秘境之蓝 无阿里不西藏 自驾阿里小北线",
                src: "./carousel_img/a.jpg",
            },
            {
                day: 25,
                date: "/Oct.2020",
                title: "这是一个什么样的国家?",
                src: "./carousel_img/b.jpg",
            },
            {
                day: 24,
                date: "/Oct.2020",
                title: "在徽州,给秋天写了8封信",
                src: "./carousel_img/c.jpg",
            },
            {
                day: 23,
                date: "/Oct.2020",
                title: "「穿过狂野的风」赶赴内蒙的追羊计划",
                src: "./carousel_img/d.jpg",
            },
            {
                day: 22,
                date: "/Oct.2020",
                title: "爱让我们无所不能|南极大冒险",
                src: "./carousel_img/e.jpg",
            },
        ];
        let carousel1 = new Carousel(itemList1);
        carousel1.appendTo(".div1");
        animation();
        function animation(){
            requestAnimationFrame(animation);
            carousel1.update();
            // carousel2.update();
}

代码:

import Component from './Component.js';
 
export default class Carousel extends Component{
    
    imgList;
    bnList;
    imgCon;
    dot;
    dotList=[];
    data;
    direction;
    pos=0;
    x=0;
    speedX=1;
    bool=false;
    time=200;
    autoBool=true;
 
    // WIDTH=13.66;
    // HEIGHT=4.55;
    WIDTH;
    HEIGHT;
    
    constructor(_data,_width,_height){
        super("div");
        this.data=_data;
        this.width = _width;
        this.height = _height;
        this.elem.className = "carousel";
        // Object.assign(this.elem.style,{
        //     width:this.WIDTH+"rem",
        //     height:this.HEIGHT+"rem",
        //     position:"relative",
        //     overflow:"hidden",
        // });
        let arr = ["./carousel_img/left.png","./carousel_img/right.png"];
        let _imgList = this.data.reduce((value,item)=>{
            if(item.src) value.push(item.src);
            return value
        },arr);
        this.loadImg(_imgList,this.createCarousel);
        // window.addEventListener("resize",e=>this.resizeHandler(e));
    }
 
    createCarousel(imgList){
 
        Object.assign(this.elem.style,{
            width:this.WIDTH+"rem",
            height:this.HEIGHT+"rem",
            position:"relative",
            overflow:"hidden",
        });
 
        this.imgList = imgList;
        this.bnList = this.imgList.splice(0,2);
 
        imgList.forEach(item=>{
            Object.assign(item.style,{
                width:this.WIDTH+"rem",
                height:this.HEIGHT+"rem",
            })
        })
 
        this.createimgCon();
        this.createDotList();
        this.createBn();
        // 动画一般在外面做,类里面只需要写状态更新即可。
        // this.animation();
 
        // 鼠标停留在轮播图上时不进行自动轮播。
        this.elem.addEventListener("mouseenter",e=>this.mouseHandler(e));
        this.elem.addEventListener("mouseleave",e=>this.mouseHandler(e));
    }
    createimgCon(){
        this.imgCon = document.createElement("div");
        Object.assign(this.imgCon.style,{
            width:this.WIDTH*2+"rem",
            height:this.HEIGHT+"rem",
            position:"absolute",
        });
        let item = this.createItem(this.imgList[0],this.data[0]);
        this.imgCon.appendChild(item);
        this.elem.appendChild(this.imgCon);
    }
    createItem(img,obj){    
        let item = document.createElement("div");
        Object.assign(item.style,{
            width:this.WIDTH+"rem",
            height:this.HEIGHT+"rem",
            position:"relative",
            float:"left",
        });
        let title = document.createElement("div");
        Object.assign(title.style,{
            position:"absolute",
            left:"15%",
            top:"0.3rem",
            fontSize:"0.3rem",
            color:"#ffffff",
            textShadow:"0.02rem 0.02rem 0.02rem #000000",
            width:"8rem",
            lineHeight:"0.5rem",
        })
        let head1=document.createElement("div");
        Object.assign(head1.style,{
            height:"0.5rem",
        })
        head1.textContent = obj.date;
        let span = document.createElement("span");
        Object.assign(span.style,{
            fontSize:"0.4rem",
        });
        span.textContent = obj.day;
        let head2 = document.createElement("div");
        Object.assign(head2.style,{
            height:"0.5rem",
        })
        head2.textContent = obj.title;
        head1.insertBefore(span,head1.firstChild);
        title.appendChild(head1);
        title.appendChild(head2);
        item.appendChild(title);
        item.appendChild(img);
 
        return item;
    }
    createDotList(){
        this.dot = document.createElement("ul");
        Object.assign(this.dot.style,{
            listStyle:"none",
            margin:0,
            padding:0,
            position:"absolute",
            left:(this.WIDTH-1.8)/2+"rem",
            bottom:"0.3rem",            
        })
        for(let i=0;i<this.imgList.length;i++){
            let li = document.createElement("li");
            Object.assign(li.style,{
                width:"0.18rem",
                height:"0.18rem",
                borderRadius:"0.2rem",
                marginLeft:i===0?"0px":"0.2rem",
                border:"0.02rem solid red",
                float:"left",
            })
            this.dot.appendChild(li);
            this.dotList.push(li);
        }
        this.dot.addEventListener("click",e=>this.dotClickHandler(e));
        this.elem.appendChild(this.dot);
    }
    createBn(){
        for(let i=0;i<this.bnList.length;i++){
            Object.assign(this.bnList[i].style,{
                position:"absolute",
                top:(this.HEIGHT*100-this.bnList[i].height)/2/100+"rem",
            })
            if(i===0){
                this.bnList[i].style.left = "0.5rem";
            }else{
                this.bnList[i].style.right = "0.5rem";
            }
            this.bnList[i].addEventListener("click",e=>this.bnClickHandler(e));
            this.elem.appendChild(this.bnList[i]);
        }
    }
    bnClickHandler(e){
        if(this.bool) return
        if(e.target===this.bnList[0]){
            this.direction="left";
            this.pos++;
            if(this.pos>this.imgList.length-1) this.pos = 0;
        }else{
            this.direction="right";
            this.pos--;
            if(this.pos<0) this.pos=this.imgList.length-1;
        }
        this.bool=true;
        this.createNextItem();
    }
    dotClickHandler(e){
        if(e.target.constructor!==HTMLLIElement) return    //这里因为是对父元素进行侦听,因此要先判断点击的是不是li,如果点击的不是小圆点就不能改变开关,直接return。不能先改变开关。
        if(this.bool)return
        for(let i=0;i<this.dotList.length;i++){
            if(e.target===this.dotList[i]){
                if(this.pos===i) return
                this.direction=i<this.pos?"right":"left";
                this.pos=i;
            }
        }
        this.bool=true;
        this.createNextItem();
    }
    createNextItem(){
        let nextItem=this.createItem(this.imgList[this.pos],this.data[this.pos]);
        if(this.direction==="left"){
            this.imgCon.appendChild(nextItem);
            this.x=0;
        }else{
            this.imgCon.insertBefore(nextItem,this.imgCon.firstChild);
            this.x=-this.WIDTH;
        }
        this.imgCon.style.left=this.x+"rem";
    }
    update(){
        this.imgMove();
        this.autoPlay();
    }
    // 这里只需要做一个状态更新即可。
    // 动画在外面做。
    // animation(){
    //     requestAnimationFrame(this.animation);
    //     if(!this.bool) return
    //     this.imgMove();
    // }
    imgMove(){
        if(!this.bool) return
        if(this.direction==="left"){
            this.x-=this.speedX;
            if(this.x<-this.WIDTH){
                this.imgCon.firstElementChild.remove();
                this.x=0;
                this.bool=false;
            }
        }else{
            this.x+=this.speedX;
            if(this.x>0){
                this.imgCon.lastElementChild.remove();
                this.x=0;
                this.bool=false;
            }
        }
        this.imgCon.style.left=this.x+"rem";
    }
    autoPlay(){
        if(!this.autoBool) return
        this.time--;    //增加防抖
        if(this.time===0){   
            let evt = new Event("click");
            this.bnList[0].dispatchEvent(evt);
            this.time=200;
        }
    }
    resizeHandler(e){
        document.documentElement.style.fontSize=document.documentElement.clientWidth/(this.WIDTH*100)*100+"px";
    }
    appendTo(parent){
        if(typeof parent==="string") parent = document.querySelector(parent);
        parent.appendChild(this.elem);
        if(!isNaN(this.WIDTH) && !isNaN(this.HEIGHT)) return
        if(parent===document.body){
            this.WIDTH = 13.66;
            this.HEIGHT = 4.55;
        }else{
            let rect = parent.getBoundingClientRect();
            this.WIDTH=rect.width/100;
            this.HEIGHT=rect.height/100;
        }
    }
    mouseHandler(e){
        if(e.type==="mouseenter"){
            this.autoBool=false;
        }else{
            this.autoBool=true;
        }
    }
 
    // 图片预加载
    loadImg(_imgList,_callBack){
        let img = new Image();
        img.i=0;
        img.arr=[];
        img.imgList=_imgList;
        // img.callBack=_callBack;
        img.src=_imgList[img.i];
        img.addEventListener("load",e=>this.imgLoadFinishHandler(e));
    }
    imgLoadFinishHandler(e){
        // console.log(e.currentTarget);
        e.currentTarget.arr.push(e.currentTarget.cloneNode());
        e.currentTarget.i++;
        if(e.currentTarget.i<e.currentTarget.imgList.length){
            e.currentTarget.src = e.currentTarget.imgList[e.currentTarget.i];
        }else{
            // e.currentTarget.callBack(e.currentTarget.arr);
            this.createCarousel(e.currentTarget.arr);
        }
    }
}

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

(0)

相关推荐

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

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

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

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

  • 原生js实现无限循环轮播图效果

    知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张 也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断是否跳回第一张和最后一张 if(newLeft>-600){ list.style.left=-3000+"px

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

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

  • 使用html+js+css 实现页面轮播图效果(实例讲解)

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=

  • JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)

    1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了,样式和逻辑均写在js里. 3.html标签代码,js代码 <div class="slider"> //轮播箭头 <p class="lastpic"><img src="../images/prev.png">&

  • 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实现点击左右按钮轮播图片效果实例

    本文实例讲述了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轮播图实现简单代码

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

  • js实现从左向右滑动式轮播图效果

    轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实现第一种效果的方法. 原理 相同大小的图片并成一列,但只显示其中一张图片,其余的隐藏,通过修改left值来改变显示的图片. 点击查看效果 html部分 nav为总容器,第一个ul列表#index为小圆点列表,鼠标覆盖哪个小圆点就显现第几张图片,on是一个给小圆点添加背景颜色属性的类:第二个ul列表#

随机推荐