页面中经常会用到各式各样的轮播图，今天贺贺为大家介绍一种常用的方法，对于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. Javascript高级编程学习笔记（9）—— 执行环境

    今天主要讲一下,JS底层的一些东西,这些东西不太好举例(应该是我水平不够) 望大家多多海涵,比心心 执行环境 执行环境(执行上下文,全文使用执行环境 )是JS中最为重要的一个概念,执行环境决定了,变量 ...

  2. Windows Azure开发之Linux虚拟机

     Windows Azure是微软的云服务集合,用来提供云在线服务所需要的操作系统与基础存储与管理的平台,是微软的云计算的核心组成组件之一.其中windows azure提供的最重要的一项服务就是 ...

  3. typescript 的安装

    1.全局安装 typeScript 包       npm install typescript -g (tsc -v 查看ts版本)2.解决模块的声明文件问题   npm install @type ...

  4. 内存管理-slab[原理]

    前言 主要讲解原理,基于2.6.32版本内核源码.本文整体思路:先由简单内存模型逐渐演进到当下通用服务器面对的内存模型,讨论每一个内存模型下slab设计需要解决的问题. 历史简介 linux内核运行需 ...

  5. js设计模式小结

    1 构造函数模式 var Person = function(name){ this.name = name; this.getName = function(){ console.log(this. ...

  6. 第三章 服务治理：Spring Cloud Eureka

    Spring Cloud Eureka是Spring Cloud Netflix 微服务套件中的一部分,它基于Netflix Eureka做了二次封装,主要负责完成微服务架构中的服务治理功能.Spri ...

  7. Google Optimization Tools实现加工车间任务规划【Python版】

    上一篇介绍了<使用.NET Core与Google Optimization Tools实现加工车间任务规划>,这次将Google官方文档python实现的版本的完整源码献出来,以满足喜爱 ...

  8. Volley Post网络请求

    /*post请求*/public void dostringVolleypost(){ /*第一步,创建请求队列*/ queue = Volley.newRequestQueue(this); /*第 ...

  9. 通过jenkins API去build一个job

    背景 查看jenkins的api 直接访问 JENKINS_URL/job/JOB_NAME/api/ 就可以查看jenkins的api build一个job的话,是POST请求 JENKINS_UR ...

  10. nginx介绍(四) - 反向代理

    前言 前面虚拟主机的部分, 发现我所有的修改, 都是对 nginx 目录下, nginx.conf 和 html 文件夹的操作. 我的最终目的, 是映射到不同电脑的tomcat里面去啊, 操作这里的h ...