轮播图js

于 2019-11-25 18:41:12 发布
阅读量103 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/personaas/article/details/103243343
版权 
<!DOCTYPE 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=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 500px;
            height: 400px;
            margin: 0 auto;
            position: relative;
        }
        .box img {
            width: 500px;
            height: 400px;
        }
        .box p {
            width: 100%;
            position: absolute;
            bottom: 30px;
            text-align: center;
            
        }
        .pink {
            border: 10px solid pink;
        }
        p span {
            display: inline-block;
            border: 10px solid #fff;
            border-radius: 50%;
            margin-right: 10px;
        }
        .left {
            position: absolute;
            top: 45%;
            left: 0px;
            width: 30px;
            height: 50px;
            line-height: 50px;
            color: #fff;
            font-size: 28px;
            background-color: rgba(0, 0, 0, .3);
            cursor: pointer;
        }

        .right {
            position: absolute;
            top: 45%;
            right: 0px;
            width: 30px;
            height: 50px;
            line-height: 50px;
            font-size: 28px;
            color: #fff;
            background-color: rgba(0, 0, 0, .3);
            cursor: pointer;
        }
        .title{
            width: 100%;
            height: 30px;
            background-color: rgba(225, 23, 01, .7);
            position: absolute;
            top: 0px;
            left: 0px;
            text-align: center;
            font-size: 20px;
            color: white;
        }
        .title2{
            width: 100%;
            height: 30px;
            background-color: rgba(225, 23, 01, .7);
            position: absolute;
            bottom: 0px;
            left: 0px;
            text-align: center;
            font-size: 20px;
            color: white;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="title"> </div>
        <div class="title2"> </div>
        <img src="./image/1.jpg" alt="">
        <div class="left" id="btnleft">
            < </div> <div class="right" id="btnright"> >
        </div>
        <p></p>
        
    </div>
    <script>
        var op = document.querySelector('p');
        var imgs = document.querySelector('img');
        var arr = ['./image/1.jpg', './image/2.jpg', './image/3.jpg', './image/4.jpg'];
        var len = arr.length;
        var str = '';
        for (var i = 0; i < len; i++) {
            str += '<span></span>'
        }
        op.innerHTML = str;
        var spans = op.getElementsByTagName('span');
        spans[0].className = 'pink';
        for (var i = 0; i < len; i++) {
            spans[i].index = i;
            spans[i].onmouseover = function () {
                for (var i = 0; i < len; i++) {
                    spans[i].className = '';
                }
                var sum=this.index+1; //this.index是从0开始的，所以要加1, 1 2 3 4
                title[0].innerHTML=sum+'/4';
                title2[0].innerHTML='帅哥'+sum;
                this.className = 'pink';
                imgs.src = arr[this.index]; //0 1 2 3 对应图片 1 2 3 4
                sums=this.index;
            }
        }
        var i=1;
        var title=document.getElementsByClassName('title');
        var title2=document.getElementsByClassName('title2');
        var btnleft=document.getElementById('btnleft');
        var btnright=document.getElementById('btnright');
        title[0].innerHTML='1/4';
        title2[0].innerHTML='帅哥1';
        btnleft.onclick = function () {
            --i;
            if (i < 1) {
                i = 4;
            }
            var sum=i;
            imgs.src = './image/' + i + '.jpg';
            title[0].innerHTML=sum+'/4';
            title2[0].innerHTML='帅哥'+sum;
            for(j=0;j<spans.length;j++){
                spans[j].className='';
            }
            spans[i-1].className = 'pink'; 
        }
        btnright.onclick = function () {
            i++;
            if (i > 4) { i = 1 }
            var sum=i;
            imgs.src = "./image/" + i + ".jpg";
            title[0].innerHTML=sum+'/4';
            title2[0].innerHTML='帅哥'+sum;
            for(j=0;j<spans.length;j++){
                spans[j].className='';
            }
            spans[i-1].className = 'pink';
        }
            setInterval(function(){
                i++;
            if (i > 4) {
                i = 1;
            }
            imgs.src = './image/' + i + '.jpg';
            for(j=0;j<spans.length;j++){
                spans[j].className='';
            }
            spans[i-1].className = 'pink';
                var sum=i;
                title[0].innerHTML=sum+'/4';
                title2[0].innerHTML='帅哥'+sum;
                
            },2000)
    </script>
</body>
</html>
秃头的甜甜圈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生js轮播图
前端爱好者的博客
01-10 1322
这是我的第一篇博客，本来是想写以下原生js的学习笔记的，但是今天刚好学习了一下原生轮播图的写法，并自己做了一些改变，就将它作为我的第一个博客写出来吧！！！话不多说，让我们开始！！！ 在这里我准备的是四张图片的轮播，当然更多图片的轮播也是可以的，只需要改一下代码的数字即可。 我们要想一下，轮播我们需要的是什么？首先是承载图片的一个容器；其实是图片以什么样的方式进行轮播，在这里我选取的是将图片排成一列...
秃鹰算法BES优化Transformer-LSTM负荷数据回归预测【含Matlab源码 6405期】.zip
08-01
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Transformer-LSTM预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Transformer-LSTM预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Transformer-LSTM预测 4.4.3 灰狼算法GWO/狼群算法WPA优化Transformer-LSTM预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Transformer-LSTM预测 4.4.5 萤火虫算法FA/差分算法DE优化Transformer-LSTM预测 4.4.6 其他优化算法优化Transformer-LSTM预测
EtherCAT协议（中文版）完整1-6册
08-01
ETG1000_1_CHN_Overview_V1i0i2_C01 ETG1000_2_CHN_EcatPhysicalLayer_V1i0i2_C01 ETG1000_3_CHN_EcatDLLServices_V1i0i2_C01 ETG1000_4_CHN_EcatDLLServices_V1i0i2_C01 ETG1000_5_CHN_EcatALServices_V1i0i2_C01 ETG1000_6_CHN_EcatALProtocols_V1i0i2_C01 ETG1000_6_V1i0i3_S_R_EcatALProtocols
大数据中心建设方案.pptx
08-01
大数据中心建设方案.pptx
PHP开发神器：探索流行的PHP代码编辑器和IDE
08-01
PHP（Hypertext Preprocessor）是一种广泛使用的开源脚本语言，主要用于Web开发，将服务器端的脚本与HTML页面相结合，创建动态交互式Web页面。PHP的名字是一个递归缩写，表示"PHP: Hypertext Preprocessor"。 ## PHP的主要特点： 1. **服务器端脚本**：PHP代码在服务器上执行，生成HTML内容，然后发送给客户端浏览器显示。 2. **嵌入HTML**：PHP代码可以直接嵌入到HTML代码中，或者通过PHP标签包含在单独的文件中。 3. **强大的功能**：PHP提供了丰富的内置函数和库，支持多种数据库连接（如MySQL、PostgreSQL等），可以处理表单、文件上传、发送邮件等。 4. **跨平台**：PHP可以在多种操作系统上运行，包括Linux、Windows、macOS等。 5. **面向对象**：PHP支持面向对象编程（OOP），允许开发者创建类和对象。 6. **可扩展性**：PHP可以通过PECL扩展库来扩展其功能。 7. **社区支持**：PHP有一个庞大的开发者社区，提供大量的框架、工具和资源。 #
[毕业设计]JAVA实现SNMP协议对网络设备MIB库的访问与数据解析(源代码+论文).zip
08-01
[毕业设计]JAVA实现SNMP协议对网络设备MIB库的访问与数据解析(源代码+论文)
静态页面仿第五人格官网(简易版)
08-01
静态页面仿第五人格官网(简易版)
1维或n维多项式建模-matlab
08-01
1维或n维多项式建模 Polyfitn是polyfit的扩展，允许用户创建具有多个自变量的模型。它还允许用户指定一个通用模型，例如二次模型，具有常数和二次项，但没有线性项。 例如，为了将多项式模型拟合到从余弦曲线中选择的点，我们只需要偶数阶项。 x = -2:.1:2; y = cos(x); p = polyfitn(x,y,'constant x^2 x^4 x^6'); p.Coefficients ans = [0.99996 -0.49968 0.041242 -0.0012079] 当然，系数不会是精确的，因为我只使用了有限数量的项来描述本质上截断的泰勒级数，而且我只有有限数量的点来构建模型。余弦级数的前4个系数应该是： >> [1 -1/2 1/24 -1/720] ans= 1 -0.5 0.041667 -0.0013889 所以我们得到了预期的结果。 x = rand(100,1); y = rand(100,1); z = exp(x+y) + randn(100,1)/100; p = polyfitn([x,y],z,3);
工业互联网智慧物流园解决方案.pptx
08-01
工业互联网智慧物流园解决方案.pptx
主要记录计算机视觉、VSLAM、点云、结构光、机械臂抓取、三维重建、深度学习、自动驾驶等前沿paper与文章 .zip
08-01
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4
Linux进程控制实验报告.pdf
08-01
Linux进程控制实验报告
汽车内外饰行业深度报告：诞生优质零部件企业的消费属性赛道
最新发布
08-01
汽车内外饰行业深度报告：诞生优质零部件企业的消费属性赛道
chromedriver-mac-x64_127.0.6519.0.zip
08-01
chromedriver-mac-x64_127.0.6519.0.zip
客户销售额排名.xlsx.xlsx
08-01
销售管理，客户类型，客户满意度，客户登记，进销存，客户记录 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
数字图像处理技术PPT、图像增强之灰度变换和彩色增强.ppt
08-01
数字图像处理技术PPT、图像增强之灰度变换和彩色增强
普华永道：2023经济功能区国资国企发展研究报告.rar
08-01
普华永道：2023经济功能区国资国企发展研究报告.rar
年度销售额报表及排名-销售业绩管理.xlsx
08-01
销售统计，调查问卷，库存明细，跟进表，业绩统计表，差异分析 ，产品清单 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
毕业设计：基于springboot的档案管理系统 PPT
08-01
进入二十一世纪以来，科学技术迅猛发展，经济、信息等领域均取得了显著进步，特别是信息与网络技术的飞速提升，对政治、经济、军事、文化等多个层面产生了深远影响。 借助电脑网络的便捷性，开发一套档案管理系统，将为人们生活带来更多便利，并在经济效能上带来显著提升，有助于节省大量时间与金钱。档案管理系统作为关键一环，其内容直接关联到管理者的工作效率。该系统主要涵盖了系统首页、个人中心、员工管理、客户信息管理、设备类型与型号管理、设备信息与维修管理、设备保养与定检信息管理、配件信息与采购管理、合同信息管理等功能，使得管理员只要电脑联网，便能随时随地管理档案，并能方便快捷地查询自己的档案信息。 本篇论文对档案管理系统进行了全面的分析，详细阐述了需求分析、功能设计、系统设计等方面，并对系统的整体设计以及各功能的实现和主要功能进行了说明，同时附上了相应的操作界面图。
[毕业设计]JAVA环境下EVENODD码编码解码算法的设计与实现(源代码+论文).zip
08-01
[毕业设计]JAVA环境下EVENODD码编码解码算法的设计与实现(源代码+论文)
轮播图 js 图片自动切换 无按钮
09-08
通过使用JavaScript编写轮播图的切换功能，可以实现无需按钮的自动切换效果。 要实现轮播图的自动切换，可以采用以下步骤： 1. HTML布局：在HTML中创建一个容器元素，用于包含所有要展示的图片。每张图片用一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值