需求：

  1. 鼠标移动到下标页码时，也转换到相对应的图片；
  2. 多张图片可以自动轮播；
  3. 鼠标移动至图片时，停止自动轮播；
  4. 可以手动左右调节；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生JS轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .outer{
            position: relative;
            top: 20px;
            cursor: pointer;
        }
        .outer .img-box .img-item {
            display: none;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        .active{
            display: block !important;
        }
        .outer ul{
            position: absolute;
            top: 250px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
        }
        .outer ul li.page-number{
            list-style-type: none;
            display: inline-block;
            color: black;
            margin: 0 6px;
            font-size: 12px;
            width: 20px;
            height: 20px;
            background-color: #05dfff;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
        }
        .page-active{
            background-color: #0000FF !important;
        }
        .outer .mover{
            position: absolute;
            top: 110px;
            left: 50%;
            height: 60px;
            width: 40px;
            background-color: rgba(255,255,255,0.65);
            line-height: 60px;
            text-align: center;
            font-size: 26px;
            display: none;
            user-select: none;  /*用户点击时，内容不能被选中*/
        }
        .outer .leftMover{
            margin-left: -260px;
        }
        .outer .rightMover{
            margin-left: 220px;
        }
    </style>
</head>
<body>
    <div id="outer" class="outer">
        <div class="img-box">
            <img src="../img/1.jpg" class="img-item active">
            <img src="../img/2.jpg" class="img-item">
            <img src="../img/3.jpg" class="img-item">
            <img src="../img/4.jpg" class="img-item">
        </div>
        <ul>
            <li class="page-number page-active">1</li>
            <li class="page-number">2</li>
            <li class="page-number">3</li>
            <li class="page-number">4</li>
        </ul>
        <a id="leftMover" class="mover leftMover">&lt;</a>
        <a id="rightMover" class="mover rightMover">&gt;</a>
    </div>
    <script>
        var objectImgItems = document.getElementsByClassName("img-item");
        var objectRowItems = document.getElementsByClassName("page-number");
        var objectOuter = document.getElementById("outer");
        var objectMover = document.getElementsByClassName("mover");
        var objectLeftMover = document.getElementById("leftMover");
        var objectRightMover =  document.getElementById("rightMover");
        <!-- 获取node在nodeList中的索引值 -->
        function getIndex(node, nodeList) {
            for (var index=0; index<nodeList.length; index++){
                if (nodeList[index] === node){
                    return index
                }
            }
        }
        <!-- 根据传入的页码索引值，转换图片和页码 -->
        function move(numberIndex) {
            for (var i=0; i<objectImgItems.length; i++){
                if (i === numberIndex) {
                    objectImgItems[i].classList.add("active");
                    objectRowItems[i].classList.add("page-active");
                } else {
                    objectImgItems[i].classList.remove("active");
                    objectRowItems[i].classList.remove("page-active");
                }
            }
        }
        <!-- 鼠标覆盖页码时，图片和页码进行转换 -->
        for (var i=0; i<objectRowItems.length; i++){
            objectRowItems[i].onmouseover = function () {
                var numberIndex = getIndex(this, objectRowItems);
                move(numberIndex);
                pageNumber = numberIndex;
            };
        }
        <!-- 鼠标移动到整个模块，则显示左右移动的图标，图片停止自动转换 -->
        objectOuter.onmouseover = function () {
            clearInterval(intervalId);
            for (var i=0; i<objectMover.length; i++){
                objectMover[i].classList.add("active");
            }
        };
        <!-- 鼠标离开整个模块，则隐藏左右移动的图标，图片开始自动转换 -->
        objectOuter.onmouseout = function () {
            intervalId = setInterval(directionMove, 2000);
            for (var i=0; i<objectMover.length; i++){
                objectMover[i].classList.remove("active");
            }
        };
        <!-- 添加页码变量，通过自增、自减，实现左右转换 -->
        var pageNumber = 0;
        function directionMove(isLeft) {
            if (isLeft){
                if (pageNumber === 0) {
                    pageNumber = 4;
                }
                pageNumber--;
            } else {
                if (pageNumber === 3) {
                    pageNumber = -1;
                }
                pageNumber++;
            }
            move(pageNumber);
        }
        <!-- 添加定时器，实现自动转换 -->
        var intervalId = setInterval(directionMove, 2000);
        <!-- 右转换 -->
        objectRightMover.onclick = function () {
            directionMove();
        };
        <!-- 左转换 -->
        objectLeftMover.onclick = function () {
            directionMove(true);
        }
    </script>
</body>
</html>

JavaScript轮播图的更多相关文章

  1. JavaScript 轮播图

    这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊 布局什么的你们自己搞定吧 <div class="slider" id="circl ...

  2. 练习:javascript轮播图效果

    javascript轮播自动播放切换滑过停止,上一页/下一页 <!DOCTYPE html> <html lang="en"> <head> & ...

  3. 超详细的原生JavaScript轮播图（幻灯片）的制作

    本次轮播图的制作主要分为3个部分,分别是:设置定时器自动轮播:点击左右切换按钮轮播:下方点击按钮轮播.具体实现步骤如下: (效果图) html部分代码如下: <div class="s ...

  4. JavaScript 轮播图实例

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  5. JavaScript 自适应轮播图

    代码 话不多说,先上代码,方便复制粘贴.演示 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. 带轮播图、导航栏、商品的简单html，以及轮播图下边数字随轮播图的改变而改变

    ---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...

  7. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  8. jquery 广告轮播图

    轮播图 /*轮播图基本功能: * 1图片切换 * 1.1图片在中间显示 * 1.2图片淡入淡出 * 2左右各有一个按钮 * 2.1点击左按钮,图片切换上一张 * 2.2点击右按钮,图片切换下一张 * ...

  9. 【JavaScript】固定布局轮播图特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Android之APP模块编译

    一,如何把app编进系统 a.源码编译,在packages/apps目录下有安卓原生的app,以Bluetooth为例,源码根目录下有Android.mk文件: packages\apps\Bluet ...

  2. html语义化 -------<fieldset>和<legend>

    为什么HTML代码要语义化,除了代码可读性好以外,SEO有帮助外,最主要的还是对一些屏幕阅读设备或者其他辅助阅读设备友好, 可以让用户在条件受限的条件下依然可以正常使用我们的产品,比方说鼠标坏了,又或 ...

  3. javaScript 基本知识点总结

    1 javaScript 简介 JavaScript最初起源于LiveScript语言,当互联网开始流行时,越来越多的网站开始使用HTML表单与用户交互,然而表单交互却成了制约网络发展的重大瓶颈(用户 ...

  4. iOS 中的 Block

    参考:链接 (1)block作为本地变量(local variable) returnType (^blockName)(parameterTypes) = ^returnType(parameter ...

  5. codeforces 724D

    注意到要字典序最小,从而变为水题. 从a选到z,每次必然是先看选部分当前字符x是否能满足覆盖,若不能则选上所有的字母x,不然break,输出答案. 进行26次dp即可. #include <cs ...

  6. 007--linux常用命令nginx和nfs服务

    作业: 集群搭建 1.部署nginx反向代理三个web服务,调度算法使用加权轮询: 2.所有web服务使用共享存储nfs,保证所有web都对其有读写权限,保证数据一致性: 一.nginx服务 1. 先 ...

  7. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 10. 使用EF Core

    支持的数据库:可以查看官方网站 https://docs.microsoft.com/en-us/ef/core/providers/ 安装了VS2017后会安装了LocalDB,验证localDB ...

  8. childNodes和Children的区别

    1.childNodes: 标准的,返回指定元素的子元素集合,包括HTML属性,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属性节点 ...

  9. Jmeter逻辑控制器操作，附栗子

    jmeter中的逻辑控制器确定采样器的执行顺序.右键线程组-->添加-->逻辑控制器. 一.简单控制器 简单控制器对JMeter如何处理添加到其中的采样器没有影响.只是方便我们做分组命名. ...

  10. 大数据系列文章-Hadoop的HDFS读写流程（二）

    在介绍HDFS读写流程时,先介绍下Block副本放置策略. Block副本放置策略 第一个副本:放置在上传文件的DataNode:如果是集群外提交,则随机挑选一台磁盘不太满,CPU不太忙的节点. 第二 ...