js面向对象轮播

最新推荐文章于 2019-05-23 14:48:00 发布
最新推荐文章于 2019-05-23 14:48:00 发布
阅读量472 收藏
点赞数
<!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.οnmοuseοver=function()
            {
                clearInterval($this.play);
            }
            box.οnmοuseοut=function()
            {
                $this.autoplay($this.index);
            }
            for(var i=0;i<numlist.length;i++)
            {
                numlist[i].index=i;
                numlist[i].οnmοuseοver=function(){
                    $this.prov=$this.index;
                    $this.imgshow(this.index,$this.numlist,$this.imglist);
                }
            }
        }
    }
    window.οnlοad=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
关注
js面向对象轮播图js
08-09
js面向对象轮播图js
基于jQuery实现的焦点轮播图
鑫鑫的博客
08-17 868
这一版是无上一页下一页功能的，后面有再加的  &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
JavaScript面向对象写个轮播图
七元八元
08-20 1282
源码： 实战地址 兼容IE，通过透明度控制图片的显示。 1. 面向对象：对外统一提供调用接口的编程思想。     js中Prototype属性解释及常用方法        通过对象的原型属性和方法创建：    在对象原型附加的属性或者方法将成为对象实例化的一部分，类似一个父类，新创建的对象都继承了prototype的属性和方法。这是因为当一个对象被创建时，这个构造函数 将会把它的属性pro...
获取后端传的图片格式（二进制流）的数据，显示到页面上
dianlupeng4187的博客
05-23 7417
function runimg(img) { axios({ url: `/file/download/${img}`, methods: 'get', responseType: 'blob'//接收的值类型 }).then((data) => { let blob = data.data; let src = window.URL.createObjectURL(...
JavaScript基于面向对象实现的无缝滚动轮播示例
10-15
这个无缝滚动轮播示例展示了如何使用JavaScript面向对象编程来封装复杂的功能，使得代码更易于理解和维护。通过创建类，我们可以更好地组织和复用代码，同时也更容易扩展和修改功能，以适应不同的需求。在实际项目中...
基于yolov3结合卡尔曼滤波匈牙利算法虚拟线圈的车流量检测python源码+项目说明.zip
09-21
本项目专注于视频基的车辆跟踪与流量统计，依托深度学习技术，实时追踪路面车辆动态并精准统计各车道车流量。该项目通过以下核心步骤高效处理输入视频数据： 高精度目标检测：采用YOLOv3模型，凭借其卓越的实时性与准确性，快速识别视频中的车辆目标，为后续追踪奠定坚实基础。 稳定目标追踪：集成SORT（Simple Online and Realtime Tracking）算法，结合卡尔曼滤波器预测车辆未来位置，同时运用匈牙利算法优化目标间的匹配，实现连续、稳定的车辆追踪，有效应对遮挡、交叉等复杂场景。 智能车流量统计：借鉴虚拟线圈概念，巧妙设计算法以监测穿越预设区域的车辆，自动计数并准确统计各车道车流量，为交通管理与分析提供可靠数据支持。 整体而言，本项目通过融合先进的目标检测与追踪技术，结合创新的流量统计方法，构建了一个高效、精准的实时车辆跟踪与流量统计系统，为智慧交通领域的发展贡献力量。
本科毕业设计--基于深度学习的人脸面部表情识别.zip
09-21
深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
雷电模拟器改成真机环境
09-21
在Android系统中，模拟器通常会被识别为非真实的设备，这可能导致某些应用或服务无法正常运行，尤其是那些需要硬件信息或root权限的应用。改真机环境意味着通过技术手段使模拟器的行为更接近真实的Android设备，包括模拟设备硬件信息、IMEI、MAC地址等，以绕过检测并提升兼容性。LSPSED（Linux System Property Setter and Editor）模块是Magisk的一个扩展，专门用于修改Android系统的系统属性。通过LSPSED，我们可以更改设备的各种系统属性，如设备型号、制造商信息等，这些修改对于使模拟器看起来更像真实设备至关重要。在使用过程中，还需要添加几个机型模块，这些模块通常包含了特定设备的系统配置信息，如设备代号、硬件信息等。通过安装这些模块，雷电模拟器可以模仿各种流行的Android设备，进一步提高应用的兼容性和真实性。
CenterNet 部署版本，便于移植不同平台（onnx、tensorRT、rknn、Horizon）
09-21
CenterNet 是一种用于目标检测的神经网络架构，它的核心思想是利用目标的中心点作为检测的关键信息。这种方法与传统的目标检测方法（如基于边界框的方法）有所不同，因为它不直接预测目标的边界框，而是预测目标的中心点坐标和目标的宽度与高度。 CenterNet 的主要特点包括： 1. **中心点预测**：网络输出目标的中心点坐标，以及目标的宽度和高度。 2. **热图（Heatmap）**：网络生成一个热图，其中每个像素点的值表示该点成为目标中心点的概率。 3. **回归任务**：除了中心点坐标，网络还需要预测目标的宽度和高度，这通常通过预测中心点周围的偏移量来实现。 4. **多任务学习**：CenterNet 通常会同时预测目标的类别、中心点坐标、宽度、高度以及目标的旋转角度（在某些变体中）。 5. **端到端训练**：CenterNet 可以直接在最终的目标检测任务上进行端到端的训练，无需复杂的区域提议网络（Region Proposal Network, RPN）或锚点（anchor）机制。 6. **高效性**：由于省略了传统目标检测中的一些步骤，CenterNe
CSP-J是计算机科学学科相关的青少年科技爱好者等级考试.docx
09-21
CSP-J是计算机科学学科相关的青少年科技爱好者等级考试，全称为青少年软件编程等级考试。以下是对CSP-J的详细介绍： 一、考试背景与目的 CSP-J考试是由全国青少年软件编程等级考试标准工作组制定，并得到中国电子学会的认可，旨在培养青少年计算机科学素养和编程能力。通过参加这一考试，青少年可以检验自己的学习成果，增强自信心和竞争力，同时为他们未来在计算机科学领域的深入学习和职业发展打下坚实的基础。 二、考试内容与形式 CSP-J考试主要面向入门级别的青少年，考察内容侧重于计算机基础知识和算法的理解。考试形式分为初赛（笔试）和复赛（机试），即CSP-J1与CSP-J2。 初赛（CSP-J1）：侧重于理论知识的考核，包括计算机基础知识、算法基本概念等，以笔试形式进行。 复赛（CSP-J2）：更侧重于上机编程能力的实践考察，要求参赛者在计算机上完成编程任务。 参赛者必须先参加初赛，并达到一定的分数方可参加复赛。 三、报名与参与 报名方式：CSP-J/S认证面向所有对计算机科学有兴趣的青少年开放，报名和认证过程均在网上进行。认证点由CCF（中国计算机学会）授权的CSP非专业级别省认证组
机械课程设计 X Y双坐标联动数控工作台设计(全套图纸).doc
最新发布
09-21
机械课程设计 X Y双坐标联动数控工作台设计(全套图纸).doc
基于BERT模型的深度学习中文文本分类实现，包含大约20000条新闻的训练和测试集，包装有简单HTTP接口可供调用。.zip
09-21
深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
MySQL数据库的安装教程与使用心得
09-21
MySQL数据库的安装教程与使用心得
直线的点斜式方程与斜截式方程.ppt
09-21
直线的点斜式方程与斜截式方程.ppt
人工智能技术面试指南人工智能技术面试指南
09-21
内容概要：本文提供了一套与人工智能相关的面试问题及其详细解答，涉及的基础知识点有机器学习的概念及其实现形式（例如监督学习与无监督学习）、常见优化算法的应用（比如梯度下降法）；探讨模型评估指标的选择（如分类任务的精度指标、回归模型的平方损失等）、解决过拟合现象的技术措施等，并具体剖析了深度学习尤其是卷积神经网络的工作机制。这份材料是应聘者准备技术岗特别是AI相关职位的理想助手。 适用人群：求职时希望专注于 AI 技术领域的人群；具有一定 AI 背景的研究人员和技术从业者。 使用场景及目标：适合于复习与巩固基本技能，在面试过程中表现出较强的专业能力和理解力。 其他说明：本资料全面介绍了人工智能基础知识、主要工具技术和常用评价方式的相关概念和技巧，有助于应聘者更好地应对技术岗位的考核与挑战。
【5层】公司办公楼全套设计+++（3156平，含计算书、建筑图，结构图、实习报告，PKPM，答辩PPT).zip
09-21
【5层】公司办公楼全套设计+++（3156平，含计算书、建筑图，结构图、实习报告，PKPM，答辩PPT) 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
JavaEE大作业 计算机学科竞赛网站及报名系统
09-21
JavaEE制作学科竞赛报名系统的意义在于：便利性：提供了一个集中、统一的平台，方便学生和教师在线完成报名、缴费、上传资料等操作，避免了繁琐的手工流程，提高了工作效率。
电子设计论文文档资料鸟鸣报警器电子设计论文文档资料鸟鸣报警器
09-21
电子设计论文文档资料鸟鸣报警器电子设计论文文档资料鸟鸣报警器
java-ssh-jsp-mysql图书管理系统实现源码(项目源码-说明文档)
09-21
网站的首页，主要实现了对首页信息的展示发布，能够展示最新的图书信息，并能查看相关的新闻信息，电子书的下载等 网站的后台登录主要实现了后台信息的登录，管理员输入用户名和密码就可以登录进入后台进行相关的操作 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：ssh 前端技术：jsp 关键技术：jsp、spring、ssm、ssh、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
JavaScript构造函数与面向对象实现轮播图
"本文主要介绍了使用JavaScript实现轮播图的两种方法：构造函数和面向对象。通过具体的代码实例，展示了如何构建一个基本的轮播图功能，包括图片切换、导航点以及左右箭头控制。" 在JavaScript中实现轮播图是一项...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值