页面中经常会用到各式各样的轮播图，今天贺贺为大家介绍一种常用的方法，对于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. Android开发 - 掌握ConstraintLayout（二）介绍

    介绍 发布时间 ConstraintLayout是在2016的Google I/O大会上发布的,经过这么长时间的更新,现在已经非常稳定. 支持Android 2.3(API 9)+ 目前的Androi ...

  2. Java 虚拟机的内存结构

    Java虚拟机运行时数据区 整个程序执行过程中,JVM会用一段空间来存储程序执行期间需要用到的数据和相关信息,这段空间一般被称作为Runtime Data Area(运行时数据区),也就是我们常说的J ...

  3. kubernetes集群搭建（5）：服务发现dns配置

    抱歉,多次尝试,均未成功,后续将通过二进制安装再次尝试

  4. Spark之GraphX的Graph_scala学习

    /* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreem ...

  5. Djang--module--单表

    Django模型层   一 ORM简介 查询数据层次图解:如果操作mysql,ORM是在pymysq之上又进行了一层封装

  6. 使用 Notification API 开启浏览器桌面提醒

    Notifications API 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外,因此即使用户已经切换标签页或移动到不同的应用程序,也可以显示.该API被设计成与不同平台上的现 ...

  7. oracle使用connect by进行级联查询 树型菜单

    Oracle使用connect by进行级联查询 树型菜单(转) connect by可以用于级联查询,常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点. 来看一个示例,现假设我们拥 ...

  8. 面试：C++实现访问者模式

    参考:深入应用C++11,访问者模式 #include <iostream> class ConcreteElement1; class ConcreteElement2; class V ...

  9. 实验吧 这个看起来有点简单!&渗透测试工具sqlmap基础教程

    题目地址:http://ctf5.shiyanbar.com/8/index.php?id=1 下载sqlmap,拖到python安装文件夹下面,在桌面创建sqlmap的cmd快捷方式,都不赘述. 教 ...

  10. ElasticSearch聚合分析

    聚合用于分析查询结果集的统计指标,我们以观看日志分析为例,介绍各种常用的ElasticSearch聚合操作. 目录: 查询用户观看视频数和观看时长 聚合分页器 查询视频uv 单个视频uv 批量查询视频 ...