页面中经常会用到各式各样的轮播图，今天贺贺为大家介绍一种常用的方法，对于JS我们需要举一反三，一种方法可以对多个轮播样式进行渲染。

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #box {

            width: 590px;

            height: 470px;

            margin: 100px auto;

            border: 1px solid #ececec;

            position: relative;

        }

        #box p {

            height: 14px;

            margin: 0;

            position: absolute;

            bottom: 50px;

            left: 50px;

        }

        #box p i {

            display: block;

            float: left;

            margin-left: 10px;

            width: 10px;

            height: 10px;

            border-radius: 7px;

            border: 2px solid #999;

        }

        #box img {

            /*display: block;*/

            width: 590px;

            height: 470px;

            display: none;

        }

        #box p i.on {

            background: #fff;

            box-shadow: 0 0 3px #fff;

        }

        #box img.show {

            display: block;

        }

    </style>

    <script>

        window.onload = function () {

            var oBox = document.getElementById('box');

            var aI = oBox.getElementsByTagName('i');

            var aImg = oBox.getElementsByTagName('img');

            for (var i = 0; i < aI.length; i++){

                aI[i].index = i;

                aI[i].onmouseover = function () {

                    for (var i = 0; i < aI.length; i++){

                        aI[i].className = '';

                        aImg[i].className = '';

                    }

                    this.className = 'on';

                    aImg[this.index].className = 'show';

                }

            }

        }

    </script>

</head>

<body>

    <div id="box">

        <p>

            <i class="on"></i>

            <i></i>

            <i></i>

            <i></i>

            <i></i>

            <i></i>

            <i></i>

        </p>

        <img src="../images/1.jpg" alt="" class="show">

        <img src="../images/2.jpg" alt="">

        <img src="../images/3.jpg" alt="">

        <img src="../images/4.jpg" alt="">

        <img src="../images/5.jpg" alt="">

        <img src="../images/6.jpg" alt="">

        <img src="../images/7.jpg" alt="">

    </div>

</body>

此种方法通过 JS 来改变 HTML 中标签的 Class 名称，从而达到轮播图的效果；

用 JS 写 （轮播图 / 选项卡 / 滑动门）的更多相关文章

  1. 原生Js写轮播图代码

    html css js 在知道jQuery如何实现轮播效果的基础上,用js写代码 如图:标记这里的地方 理解一下 用到的知识: 1.HTML DOM 的appendChild() 和 removeCh ...

  2. 授人以渔式解析原生JS写轮播图

    需求与分析 需求:循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片.鼠标放到轮播图的图片上时不再自动轮播并且左右箭 ...

  3. 原生js写轮播图效果

    <script> var picarr=[ "pic/lb1.jpg", "pic/lb2.jpg", "pic/lb3.jpg" ...

  4. 原生js焦点轮播图的实现

    继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...

  5. photoSlider-html5原生js移动开发轮播图-相册滑动插件

    简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...

  6. js编写轮播图，广告弹框

    1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...

  7. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  8. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  9. 使用原生js将轮播图组件化

    代码地址如下:http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...

随机推荐

  1. Mac键盘按键符号

    通过修饰键来查看 像command.option.control.shift这些按键在Mac下叫做修饰键,一般情况下他们大都用来辅助输入或者用作快捷键的修饰键. 打开“系统偏好设置”,点击“键盘→键盘 ...

  2. Alpha代码规范、冲刺任务与计划

    Alpha代码规范.冲刺任务与计划 团队名称: 云打印 作业要求: Alpha代码规范.冲刺任务与计划 作业目标:代码规范.冲刺任务与计划. 团队队员 队员学号 队员姓名 个人博客地址 备注 2216 ...

  3. Two strings 的另一种解法

    Two strings 的另一种解法 论文中的解法是离线插入 \(O(\log n)\) 询问 \(O(\log n)\) 的,不过我发现有一种离线插入 \(O(1)\) 询问 \(O(\log n) ...

  4. 微信开发之获取openid及推送模板消息

    有很多的朋友再问我怎么获取code,openid之类的问题,在这里我就给大家分享一下. 在做微信支付是需要获取openid的,推送模板消息也是需要openid包括其他一些功能分享等也都是需要的,ope ...

  5. 自动化测试 selenium 环境搭建

    做 web 项目,测试是无法避免的.对于某些特定功能,采用单元测试就行.但如果想对网站进行整体测试,人工点击测试可行但有点累,如果能借助自动化测试工具就更好了.selenium 就是一款能满足这样要求 ...

  6. Tensflow的targmax函数

    一.函数: argmax( input, axis=None, name=None, dimension=None, output_type=tf.int64 ) 简单的说,tf.argmax就是返回 ...

  7. 音频标签化2：youtube-8m项目的训练、评估与测试

    之前小程介绍了使用机器学习的办法来解决"音频标签化"的问题,并且提到了训练样本audioset跟youtube-8m的dataset,而训练模型上也提到了youtube-8m的模型 ...

  8. Solidity中uint转string

    在<Solidity中uint转bytes>中,我们知道unit如何转换成bytes,其实把uint转换成string,就是在最后加上string(bytes变量)即可,如下所示: pra ...

  9. 开源网站流量统计系统Piwik源码分析——后台处理（二）

    在第一篇文章中,重点介绍了脚本需要搜集的数据,而本篇主要介绍的是服务器端如何处理客户端发送过来的请求和参数. 一.设备信息检测 通过分析User-Agent请求首部(如下图红线框出的部分),可以得到相 ...

  10. pip解决超时问题（timeout）

    我们下载python的库一般会使用pip工具.但在下载的过程中经常会timeout,这是因为资源在国外,我们国内某些资源下载速度特别慢,主要有两种方法解决. 一.设置pip timeout超时时间 创 ...