页面中经常会用到各式各样的轮播图，今天贺贺为大家介绍一种常用的方法，对于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. 2017CS231n学习笔记——计算机视觉的概述

    本节课主要讲述了cs231n课程的背景和计算机视觉的历史,也主要介绍了目前很重要的一个计算机视觉数据集--IMAGENET. 更多内容参考我的AI学习之路 课程简介 这门课程是由stanford大学计 ...

  2. SSH配置免密登录

    [参考文章]:linux服务器ssh免密码登录 [参考文章]:ssh分发秘钥时出现错误“Permission denied (publickey,gssapi-keyex,gssapi-with-mi ...

  3. Liferay开发人员培训计划

    第1节 1.介绍适合和不适合Liferay的一些应用领域2.安装Liferay开发环境,下载Liferay源码:3.配置Liferay bundle.Liferay SDK,配置数据库:4.Lifer ...

  4. redis epoll 原理梗概

    redis 是一个单线程却性能非常好的内存数据库, 主要用来作为缓存系统. redis 采用网络IO多路复用技术来保证在多连接的时候, 系统的高吞吐量.为什么 Redis 中要使用 I/O 多路复用这 ...

  5. 抽象语法树(AST)

    AST描述 在计算机科学中,抽象语法树(AST)或语法树是用编程语言编写的源代码的抽象语法结构的树表示.树的每个节点表示在源代码中出现的构造.语法是“抽象的”,因为它不代表真实语法中出现的每个细节,而 ...

  6. Java 架构师+高并发+性能优化+Spring boot大型分布式项目实战

    视频课程内容包含: 高级 Java 架构师包含:Spring boot.Spring cloud.Dubbo.Redis.ActiveMQ.Nginx.Mycat.Spring.MongoDB.Zer ...

  7. Spring杂记BeanFactory之getBean方法

    1.(BeanFactory) getBean(beanName) 2.(AbstractBeanFactory) doGetBean 3.(AbstractBeanFactory) transfor ...

  8. leetCode(寻找峰值)-二分查找

    题目: 峰值元素是指其值大于左右相邻值的元素. 给定一个输入数组 nums,其中 nums[i] ≠ nums[i+1],找到峰值元素并返回其索引. 数组可能包含多个峰值,在这种情况下,返回任何一个峰 ...

  9. sql多条件查询语句

    如上图:三个文本可选项,那sql语句怎么写呢? 1.首先获取三个文本的值分别为Name,Age,Sex. 2.string sql="select * from 表 where 1=1&qu ...

  10. js------科学计数法转换为正常小数

    // toD.js文件export default (val) => { const e = String(val) let rex = /^([0-9])\.?([0-9]*)e-([0-9] ...