javascript_面向对象_轮播图（淡入淡出）_ES3_使用prototype和构造函数

最新推荐文章于 2021-06-21 13:26:22 发布

田江

最新推荐文章于 2021-06-21 13:26:22 发布

阅读量594

点赞数

分类专栏： JavaScript从入门到精通文章标签：面向对象 javascript ES3

本文链接：https://blog.csdn.net/jiang7701037/article/details/79147317

版权

JavaScript从入门到精通专栏收录该内容

147 篇文章 79 订阅

订阅专栏

解释：

1、该轮播图的切换效果是淡入淡出

2、该轮播图使用了prototype属性，解决了上一版“http://blog.csdn.net/jiang7701037/article/details/78963256”

javascript_面向对象_轮播图（淡入淡出）没有使用prototype的问题

效果图：

代码：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            list-style: none;
        }

        #box{
            position:relative;
            width:400px;
            height:300px;
        }

        #box2{
            position:relative;
            width:600px;
            height:200px;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
    <br/><br/><br/><br/>
    <div id="box2">

    </div>
</body>
</html>
<script type="text/javascript" src="js/sliderShowPlugin.js"></script>
<script type="text/javascript">

function $(id){
    return document.getElementById(id);
}

window.onload = function () {
    new SlideShow(
        {
            "boxDom":$("box"),
            "width":400,
            "height":300,
            "imgs":["img/timg1.jpg","img/timg3.jpg","img/timg2.jpg"],
            "timespace":3000,
            "btnWidth":20,
            "btnHeight":20,
            "btnColor":"orange",
            "btnHighColor":"red"
        }
    );

    new SlideShow(
        {
            "boxDom":$("box2"),
            "width":600,
            "height":200,
            "imgs":["img/timg4.jpg","img/timg5.jpg","img/timg2.jpg","img/timg1.jpg"],
            "timespace":4000,
            "btnWidth":10,
            "btnHeight":10,
            "btnColor":"pink",
            "btnHighColor":"yellow"
        }
    );
}
</script>

js代码：sliderShowPlugin.js

//1、定义类
function SlideShow(obj) {
    //1）、属性
    this.boxDom = obj.boxDom;
    this.width = obj.width;
    this.height = obj.height;
    //要播放的图片数组
    this.imgs = obj.imgs;
    this.ord = 0;//代表当前图片的序号，从0开始。
    this.myTimer = null;

    this.timespace = obj.timespace;

    //轮播图中的按钮
    this.btnWidth = obj.btnWidth;
    this.btnHeight = obj.btnHeight;
    this.btnColor = obj.btnColor;//原始颜色
    this.btnHighColor = obj.btnHighColor;//高亮颜色

    this.initUI();
    this.initEvent();
    this.autoChange();
}


    //2）、方法（函数）
SlideShow.prototype.initUI = function(){
        //一、创建所有的HTML元素，并设置css样式
        //1、创建img标记
        for(let i=0;i<this.imgs.length;i++){
            //1)、创建img对象
            let imgDom = document.createElement("img");
            imgDom.src = this.imgs[i];
            //2)、设置样式
            imgDom.style.cssText = "position:absolute;width:"+this.width+"px;height:"+this.height+"px;";
            //3)、添加到容器里
            this.boxDom.appendChild(imgDom);
        }

        //2、创建ul
        let ulDom = document.createElement("ul");
        ulDom.style.cssText = "position:absolute;right:20px;bottom:10px;height:40px;";
        //3、创建li
        for(let i=0;i<this.imgs.length;i++){
            let liDom = document.createElement("li");
            liDom.style.cssText = "float:left;margin-left:10px;border-radius:50%;";
            liDom.style.width=this.btnWidth+"px";
            liDom.style.height=this.btnHeight+"px";
            liDom.style.backgroundColor=this.btnColor;
            ulDom.appendChild(liDom);
        }
        //4、把ul添加到容器里
        this.boxDom.appendChild(ulDom);

        //二、初始化界面
        //1、把每张图片的透明度进行初始化
        let imgDoms = this.boxDom.children;
        imgDoms[0].style.opacity = 1;
        for(let i=1;i<imgDoms.length-1;i++){
            imgDoms[i].style.opacity = 0;
        }

        //第一按钮变成高亮
        let lis = this.boxDom.lastElementChild.children;
        lis[0].style.backgroundColor=this.btnHighColor;
    };

    //初始事件
SlideShow.prototype.initEvent = function(){
        let obj = this;//把当前this保存到obj里。

        //鼠标进入盒子的区域，停止变换
        this.boxDom.onmouseover =function(){
            window.clearInterval(obj.myTimer);
        };

        this.boxDom.onmouseout = function(){
            obj.autoChange();
        }
        let lis = this.boxDom.lastElementChild.children;
        for(let i=0;i<lis.length;i++){
            //赋值语句。
            lis[i].onclick = function(){//此函数的执行必须点击li。
                obj.goImg(i);//
            }
        }
    }

    //1、自动变换图片
SlideShow.prototype.autoChange=function(){
        this.myTimer=setInterval(()=>{
            //处理两个数据：一个是要淡出的图片序号，一个是要淡入的图片序号。
            let outord = this.ord;//ord++之前的ord就是要出去的ord
        //1、改变序号
        this.ord++;//4
        //2、处理边界
        if(this.ord>this.imgs.length-1){
            this.ord=0;
        }
        //3、改变外观；
        this.changeUI(outord,this.ord);
    },this.timespace);
    };


    //功能：给定出的序号和进的序号，完成两张图片的淡入淡出效果
SlideShow.prototype.changeUI=function(outord,inord){
        let currOpacity = 1;
        let incOpacity = -0.1;

        let imgs = this.boxDom.children; //document.getElementsByTagName("img");

        let myTimer = setInterval(function(){
            //1、改变数据
            currOpacity=currOpacity+incOpacity;//0.1
            //2、数据合法性的判断（边界）
            if(currOpacity<=0){  //
                window.clearInterval(myTimer);
            }
            //3、改变外观
            imgs[outord].style.opacity = currOpacity;
            imgs[inord].style.opacity = 1-currOpacity;
        },200);

        //2)、改变豆豆的背景颜色。
        let lis = this.boxDom.lastElementChild.children;
        //把所有的按钮变成橙色（初始颜色）
        for(let i=0;i<lis.length;i++){
            lis[i].style.backgroundColor = this.btnColor;
        }
        //把当前的变成红色
        lis[inord].style.backgroundColor=this.btnHighColor;
    };



    //3、跳转到指定的图片上
SlideShow.prototype.goImg=function(transOrd){//0
        outord = this.ord;//ord改变之前的ord就是要出去的ord
        //1、改变序号（把当前图片序号ord的值改为跳转的图片序号；）
        this.ord = transOrd;
        //2、改变外观
        this.changeUI(outord,this.ord);
    };

田江

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
javascript_面向对象_轮播图（淡入淡出）_ES3_使用prototype和构造函数

解释： 1、该轮播图的切换效果是淡入淡出 2、该轮播图使用了prototype属性，解决了上一版“http://blog.csdn.net/jiang7701037/article/details/78963256”javascript_面向对象_轮播图（淡入淡出）没有使用prototype的问题效果图：代码：HTML代码：
复制链接

扫一扫