js面向对象轮播

最新推荐文章于 2022-02-08 14:33:29 发布
最新推荐文章于 2022-02-08 14:33:29 发布
阅读量525 收藏
点赞数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>taobao首页轮播原生js面对对象封装版</title>
<style>
    <!--
    body, ul, li, p {
        margin: 0;
        padding: 0;
    }
    ul{
        list-style-type:none;
    }
    body {
        font-family:"Times New Roman", Times, serif;
    }
    #box {
        position:relative;
        width:492px;
        height:172px;
        margin:10px auto;
    }
    #box .imgList{
        position:relative;
        width:490px;
        height:170px;
        overflow:hidden;
    }
    #box .imgList li{
        position:absolute;
        top:0;
        left:0;
        width:490px;
        height:170px;
    }
    #box .countNum{
        position:absolute;
        right:0;
        bottom:5px;
    }
    #box .countNum li{
        width:20px;
        height:20px;
        float:left;
        color:#fff;
        border-radius:20px;
        background:#f90;
        text-align:center;
        margin-right:5px;
        cursor:pointer;
        opacity:0.7;
        filter:alpha(opacity=70);
    }
    #box .countNum li.current{
        background:#f60;
        font-weight:bold;
        opacity:1;
        filter:alpha(opacity=70);
    }
    -->
</style>
<script>
    <!--
    function runImg(){}
    runImg.prototype={
        bigbox:null,//最外层容器
        boxul:null,//子容器ul
        imglist:null,//子容器img
        numlist:null,//子容器countNum
        prov:0,//上次显示项
        index:0,//当前显示项
        timer:null,//控制图片转变效果
        play:null,//控制自动播放
        imgurl:[],//存放图片
        count:0,//存放的个数
        $:function(obj)
        {
            if(typeof(obj)=="string")
            {
                if(obj.indexOf("#")>=0)
                {
                    obj=obj.replace("#","");
                    if(document.getElementById(obj))
                    {
                        return document.getElementById(obj);
                    }
                    else
                    {
                        alert("没有容器"+obj);
                        return null;
                    }
                }
                else
                {
                    return document.createElement(obj);
                }
            }
            else
            {
                return obj;
            }
        },
        //初始化
        info:function(id)
        {
            this.count=this.count<=5?this.count:5;
            this.bigbox=this.$(id);
            for(var i=0;i<2;i++)
            {
                var ul=this.$("ul");
                for(var j=1;j<=this.count;j++)
                {
                    var li=this.$("li");
                    li.innerHTML=i==0?this.imgurl[j-1]:j;
                    ul.appendChild(li);
                }
                this.bigbox.appendChild(ul);
            }
            this.boxul=this.bigbox.getElementsByTagName("ul");
            this.boxul[0].className="imgList";
            this.boxul[1].className="countNum";
            this.imglist=this.boxul[0].getElementsByTagName("li");
            this.numlist=this.boxul[1].getElementsByTagName("li");
            for(var j=0;j<this.imglist.length;j++)
            {
                this.alpha(j,0);
            }
            this.alpha(0,100);
            this.numlist[0].className="current";
        },
        //封装程序入口
        action:function(id)
        {
            this.autoplay();
            this.mouseoverout(this.bigbox,this.numlist);
        },
        //图片切换效果
        imgshow:function(num,numlist,imglist)
        {
            this.index=num;
            var pralpha=100;
            var inalpha=0;
            for(var i=0;i<numlist.length;i++)
            {
                numlist[i].className="";
            }
            numlist[this.index].className="current";
            clearInterval(this.timer);
            for(var j=0;j<this.imglist.length;j++)
            {
                this.alpha(j,0);
            }
            this.alpha(this.prov,100);
            this.alpha(this.index,0);
            var $this=this;
            //利用透明度来实现切换图片
            this.timer=setInterval(function(){
                inalpha+=2;
                pralpha-=2;
                if(inalpha>100){inalpha=100};//不能大于100
                if(pralpha<0){pralpha=100};
                //为兼容性赋样式
                $this.alpha($this.prov,pralpha);
                $this.alpha($this.index,inalpha);
                if(inalpha==100&&pralpha==0){clearInterval($this.timer)};//当等于100的时候就切换完成了
            },20)//经测试20是我认为最合适的值
        },
        //设置透明度
        alpha:function(i,opacity){
            this.imglist[i].style.opacity=opacity/100;
            this.imglist[i].style.filter="alpha(opacity="+opacity+")";
        },
        //自动播放
        autoplay:function(){
            var $this=this;
            this.play=setInterval(function(){
                $this.prov=$this.index;
                $this.index++;
                if($this.index>$this.imglist.length-1){$this.index=0};
                $this.imgshow($this.index,$this.numlist,$this.imglist);
            },2000)
        },
        //处理鼠标事件
        mouseoverout:function(box,numlist)
        {
            var $this=this;
            box.onmouseover=function()
            {
                clearInterval($this.play);
            }
            box.onmouseout=function()
            {
                $this.autoplay($this.index);
            }
            for(var i=0;i<numlist.length;i++)
            {
                numlist[i].index=i;
                numlist[i].onmouseover=function(){
                    $this.prov=$this.index;
                    $this.imgshow(this.index,$this.numlist,$this.imglist);
                }
            }
        }
    }
    window.onload=function(){
        var runimg=new runImg();
        runimg.count=5;
        runimg.imgurl=[
            "<img src=\"http://i.mmcdn.cn/simba/img/T117eTXmXqXXXXXXXX.jpg\"/>",
            "<img src=\"http://img03.taobaocdn.com/tps/i3/T1t8eTXbBtXXXXXXXX-490-170.png\"/>",
            "<img src=\"http://i.mmcdn.cn/simba/img/T1OVOUXeNjXXXXXXXX.jpg\"/>",
            "<img src=\"http://i.mmcdn.cn/simba/img/T1J.9TXc8lXXXXXXXX.jpg\"/>",
            "<img src=\"http://img03.taobaocdn.com/tps/i3/T1ITuTXbRnXXXXXXXX-490-170.png\"/>"];
        runimg.info("#box");
        runimg.action("#box");
    }
    -->
</script>
</head>


<body>
<center><h1>Author:wyf</h1><p>2012/2/25</p></center>
<div id="box"></div>
</body>
</html>
hxc506896582
关注
基于jQuery实现的焦点轮播图
鑫鑫的博客
08-17 958
这一版是无上一页下一页功能的，后面有再加的  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;轮播图实验--无上一页下一页功能&lt;/title&gt; &lt;style&gt
js面向对象轮播图js
08-09
js面向对象轮播图js
JavaScript面向对象写个轮播图
七元八元
08-20 1325
源码： 实战地址 兼容IE，通过透明度控制图片的显示。 1. 面向对象：对外统一提供调用接口的编程思想。     js中Prototype属性解释及常用方法        通过对象的原型属性和方法创建：    在对象原型附加的属性或者方法将成为对象实例化的一部分，类似一个父类，新创建的对象都继承了prototype的属性和方法。这是因为当一个对象被创建时，这个构造函数 将会把它的属性pro...
获取后端传的图片格式（二进制流）的数据，显示到页面上
dianlupeng4187的博客
05-23 7486
function runimg(img) { axios({ url: `/file/download/${img}`, methods: 'get', responseType: 'blob'//接收的值类型 }).then((data) => { let blob = data.data; let src = window.URL.createObjectURL(...
js面向对象轮播图写法
b741759587的博客
09-26 226
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding: 0;}ul,li{list-st...
JS面向对象轮播图实现
weixin_38337068的博客
06-29 1792
在这里只是把实现代码写出来，需要深入讨论交流的加微信 ni461586842 *{ margin: 0; padding: 0; } #pci{ width: 400px; height: 400px; margin: 50px auto; position: relative; overflow: hidden; } ul{ position: ab
JavaScript轮播图（面向对象）
qq_45799465的博客
02-08 1756
步骤 轮播图1 HTML+CSS 轮播图2 动态生成页面 通过 JavaScript程序 生成 div标签中 所有 轮播图需要的标签 生成 ul ol div 标签节点 根据数组动态生成 原始 ul>li ol>li ul > li > img ol > li 第一个li添加 class,active 将生成的 ul>li ol>li 字符串 写入 ul ol 标签节点 将 ul ol div 标签节点 写入 轮播图div中 获取 原始 ul.
js面向对象写轮播图
weixin_46500485的博客
09-10 519
面向对象轮播图 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> <style> *
Js中利用面向对象实现轮播图
FLJ1027的博客
12-10 489
利用面向对象实现轮播图，按钮切图，及延时器自动切图。图片请自行准备啦， <head> <meta charset="utf-8"> <title></title> <style> .cont{width:1000px;height:260px;margin: 20px auto;position: relative;overfl...
面向对象轮播图
Cupid
07-14 152
面向对象轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &lt
JS的面向对象实例--轮播图
weixin_46370288的博客
03-08 303
实现轮播图的方法有很多种，本篇是通过同时控制两个索引（要走的，要进来的）的方式让图片动起来 结构部分 <body> //展现图片的空间 <div class="box"> //放轮播图所有图片 <div class="imgbox"> <a><img src="../img/banner1.jpg" alt=""&...
JavaScript基于面向对象实现的无缝滚动轮播示例
10-15
这个无缝滚动轮播示例展示了如何使用JavaScript面向对象编程来封装复杂的功能，使得代码更易于理解和维护。通过创建类，我们可以更好地组织和复用代码，同时也更容易扩展和修改功能，以适应不同的需求。在实际项目中...
中文疾病诊断数据集（百万条），可用于中国人疾病分析、疾病诊断
08-19
资源下载链接为： https://pan.quark.cn/s/056be54e94fa 中文疾病诊断数据集（百万条），可用于中国人疾病分析、疾病诊断。（最新、最全版本！打开链接下载即可用！）
【计算机视觉】基于立体视觉的3D目标检测框架优化：联合2D边界框与实例深度估计的高效多类别检测系统设计（含详细代码及解释）
08-19
内容概要：这篇论文提出了一种基于立体视觉的3D目标检测框架，核心创新包括直接实例深度估计方法、自适应空间特征聚合模块。该框架仅用左图像生成联合2D边界框并预测3D框中心深度，通过减弱背景点影响并整合重要实例特征，提高了3D检测的精度和效率。相比现有方法，该框架在KITTI基准测试上表现出色，实现了更高的检测精度（68.7% AP）和更快的推理速度（8.5 FPS）。论文还详细介绍了框架的核心模块实现，如实例深度估计网络、自适应空间特征聚合模块以及完整的立体3D检测框架，并通过实验验证了各模块的有效性。 适合人群：从事计算机视觉、自动驾驶或机器人领域的研究人员和技术开发者，尤其是对3D目标检测、立体视觉感兴趣的从业者。 使用场景及目标：①提高3D目标检测精度和效率；②研究立体视觉在3D检测中的应用；③探索深度估计和特征聚合的新方法；④应用于自动驾驶、机器人导航等实际场景。 其他说明：论文不仅提供了理论分析，还给出了详细的代码实现，便于读者理解和复现。该框架在KITTI数据集上进行了充分验证，证明了其在多类别3D检测任务中的优越性能。此外，论文还讨论了现有方法的局限性，并提出了针对性的解决方案。
基于单片机的垃圾桶系统设计(51+1602+SG90+RSD+HX711) 0437
08-19
包括：源程序工程文件、Proteus仿真工程文件、电路原理图文件、配套技术手册、论文资料等 1、采用51单片机作为主控芯片； 2、采用LCD1602作为显示模块，用于显示人体靠近信息、垃圾重量信息； 3、采用压力传感器+HX711模块检测垃圾投入后重量变换； 4、采用HC-SR501模块检测人体靠近信息； 5、采用舵机作为垃圾箱盖子驱动力； 6、当检测到人体靠近信息后，开启箱盖；开盖后检测到重量变化，关闭箱盖；
中文 NLP 语料库数据集
08-19
资源下载链接为： https://pan.quark.cn/s/b9dc05a1369f 中文 NLP 语料库数据集（最新、最全版本！打开链接下载即可用！）
slop-7.6-5.el8.tar.gz
08-19
# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
分子通信基于空间调制的MIMO分子通信系统设计与性能优化：提高能量效率及抗干扰能力（含详细代码及解释）
最新发布
08-19
内容概要：论文提出了一种基于空间调制的能量高效分子通信方案(SM-MC)，将传输符号分为空间符号和浓度符号。空间符号通过激活单个发射纳米机器人的索引来传输信息，浓度符号则采用传统的浓度移位键控(CSK)调制。相比现有的MIMO分子通信方案，SM-MC避免了链路间干扰，降低了检测复杂度并提高了性能。论文分析了SM-MC及其特例SSK-MC的符号错误率(SER)，并通过仿真验证了其性能优于传统的MIMO-MC和SISO-MC方案。此外，论文还探讨了分子通信领域的挑战、优势及相关研究工作，强调了空间维度作为新的信息自由度的重要性，并提出了未来的研究方向和技术挑战。 适合人群：具备一定通信理论基础，特别是对纳米通信和分子通信感兴趣的科研人员、研究生和工程师。 使用场景及目标：①理解分子通信中空间调制的工作原理及其优势；②掌握SM-MC系统的具体实现细节，包括发射、接收、检测算法及性能分析；③对比不同分子通信方案（如MIMO-MC、SISO-MC、SSK-MC）的性能差异；④探索分子通信在纳米网络中的应用前景。 其他说明：论文不仅提供了详细的理论分析和仿真验证，还给出了具体的代码实现，帮助读者更好地理解和复现实验结果。此外，论文还讨论了分子通信领域的标准化进展，以及未来可能的研究方向，如混合调制方案、自适应调制技术和纳米机器协作协议等。
spandsp-apidoc-0.0.6-9.el8.tar.gz
08-19
# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
基于FMCW雷达的多天线定位系统.zip
08-19
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值