<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<style>

    * {box-sizing:border-box}

    body {font-family: Verdana,sans-serif;}

    .mySlides {display:none}

    /* 幻灯片容器 */

    .slideshow-container {

        max-width: 1000px;

        position: relative;

        margin: auto;

    }

    /* 下一张 & 上一张 按钮 */

    .prev, .next {

        cursor: pointer;

        position: absolute;

        top: 50%;

        width: auto;

        margin-top: -22px;

        padding: 16px;

        color: white;

        font-weight: bold;

        font-size: 18px;

        transition: 0.6s ease;

        border-radius: 0 3px 3px 0;

    }

    /* 定位 "下一张" 按钮靠右 */

    .next {

        right: 0;

        border-radius: 3px 0 0 3px;

    }

    /* On hover, add a black background color with a little bit see-through */

    .prev:hover, .next:hover {

        background-color: rgba(0,0,0,0.8);

    }

    /* 标题文本 */

    .text {

        color: #f2f2f2;

        font-size: 15px;

        padding: 8px 12px;

        position: absolute;

        bottom: 8px;

        width: 100%;

        text-align: center;

    }

    /* 数字文本 (1/3 等) */

    .numbertext {

        color: #f2f2f2;

        font-size: 12px;

        padding: 8px 12px;

        position: absolute;

        top: 0;

    }

    /* 标记符号 */

    .dot {

        cursor:pointer;

        height: 13px;

        width: 13px;

        margin: 0 2px;

        background-color: #bbb;

        border-radius: 50%;

        display: inline-block;

        transition: background-color 0.6s ease;

    }

    .active, .dot:hover {

        background-color: #717171;

    }

    /* 淡出动画 */

    .fade {

        -webkit-animation-name: fade;

        -webkit-animation-duration: 1.5s;

        animation-name: fade;

        animation-duration: 1.5s;

    }

    @-webkit-keyframes fade {

        from {opacity: .4}

        to {opacity: 1}

    }

    @keyframes fade {

        from {opacity: .4}

        to {opacity: 1}

    }

</style>

<body>

<div class="slideshow-container">

    <div class="mySlides fade">

        <div class="numbertext">1 / 3</div>

        <img src="https://c.runoob.com/wp-content/uploads/2017/01/img_mountains_wide.jpg" style="width:100%">

        <div class="text">文本 1</div>

    </div>

    <div class="mySlides fade">

        <div class="numbertext">2 / 3</div>

        <img src="https://c.runoob.com/wp-content/uploads/2017/01/img_fjords_wide.jpg" style="width:100%">

        <div class="text">文本 2</div>

    </div>

    <div class="mySlides fade">

        <div class="numbertext">3 / 3</div>

        <img src="https://c.runoob.com/wp-content/uploads/2017/01/img_nature_wide.jpg" style="width:100%">

        <div class="text">文本 3</div>

    </div>

    <a class="prev" onclick="plusSlides(-1)">❮</a>

    <a class="next" onclick="plusSlides(1)">❯</a>

</div>

<br>

<div style="text-align:center">

    <span class="dot" onclick="currentSlide(1)"></span>

    <span class="dot" onclick="currentSlide(2)"></span>

    <span class="dot" onclick="currentSlide(3)"></span>

</div>

</body>

</html>

<script>

    var slideIndex = 1;

    showSlides(slideIndex);

    //    $(function(){

    //        showSlides(1);

    //    });

    function plusSlides(n) {

        showSlides(slideIndex += n);

    }

    //小圆点 属性：onclick

    function currentSlide(n) {

        showSlides(slideIndex = n);

    }

    function showSlides(n) {

//        alert('zhixing');

        var i;

        var slides = document.getElementsByClassName("mySlides");

        var dots = document.getElementsByClassName("dot");

        if (n > slides.length) {slideIndex = 1}

        if (n < 1) {slideIndex = slides.length}

        //全部隐藏

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

            slides[i].style.display = "none";

        }

        //全部小圆点取消高亮

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

            dots[i].className = dots[i].className.replace(" active", "");

        }

        //对应的div显示+对应的小圆点高亮

        slides[slideIndex-1].style.display = "block";

        dots[slideIndex-1].className += " active";

    }

</script>

js 轮播图效果的更多相关文章

  1. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  2. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  3. js原生实现轮播图效果（面向对象编程）

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  4. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  5. 原生js轮播图

    //用原生js实现了一个简单的轮播图效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...

  6. JavaScript实现轮播图效果

    我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...

  7. 小程序实践（二）：swiper组件实现轮播图效果

    swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...

  8. jQuey实现轮播图效果

    再平常的浏览器页面,轮播图都是必不可缺少的一个板块,在这总结了一下轮播图基本的一些样式 首先介绍一下,本文实现的轮播图的基本效果: 1. 3s自动切换图片,图片切换时提示点跟随切换 2. 鼠标划到图片 ...

  9. 纯js轮播图练习-1

    偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...

随机推荐

  1. GHOST CMS - 结构 Structure

    Structure Ghost主题包含静态HTML模板,这些模板使用helper类从站点输出数据,并使用定制的CSS进行样式化 A Ghost theme contains static HTML t ...

  2. ssh服务介绍及配置

    一.ssh介绍 1.什么是 ssh ssh 是 Secure Shell 的缩写,是一个建立在应用层上的安全远程管理协议.ssh 是目前较为可靠的传输协议,专为远程登录会话和其他网络服务提供安全性.利 ...

  3. Asp.Net MVC Web API 中Swagger教程，使用Swagger创建Web API帮助文件

    什么是Swagger? Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法 ...

  4. VS删除代码中没用的空白行

    在vs编辑器中有时需要批量删除无用的空白行,为此,可以使用vs编辑器的查找替换功能: 1. Ctrl+H,打开替换功能框. 2.选择“使用正则表达式”,“当前文档”. 3.在查找框中输入: (?< ...

  5. HA: ISRO Vulnhub Walkthrough

    下载地址: https://www.vulnhub.com/entry/ha-isro,376/ 主机扫描: ╰─ nmap -p- -sV -oA scan 10.10.202.131Startin ...

  6. Linux7 64安装 oracle 11g Error in invoking target 'agent nmhs' of makefile

    在makefile中添加链接libnnz11库的参数修改$ORACLE_HOME/sysman/lib/ins_emagent.mk,将$(MK_EMAGENT_NMECTL)修改为:$(MK_EMA ...

  7. 利用FOR XML PATH行转列（根据某字段分组，多行数据转成一行，并用逗号隔开）

    CREATE TABLE #TEST(A VARCHAR(10) NULL,B VARCHAR(MAX) NULL) INSERT INTO #TESTSELECT 'A','A001'UNION A ...

  8. Leetcode823 : 因子二叉树问题

    问题描述 给定一个数组,数组中的数不重复,且均大于1.要求使用数组中的数构建二叉树,每个数字可以被重复使用,除了叶子节点,每个节点的值等于其子节点的乘积,求构建二叉树的数量,返回的结果mod 10** ...

  9. 从无到有通过IDEA搭建SpringBoot项目

    本人第一次写博客希望记录当下,努力成为IT界中的清流,写的不好多多包涵. SpringBoot是由Pivotal团队在2013年开始研发.2014年4月发布第一个版本的全新开源的轻量级框架.它基于Sp ...

  10. ConcurrentHashMap（1.7）分析

    1.  先来了解ConcurrentHashMap中的几个成员,当然大多数与HashMap中的相似,我们只看独有的成员 /** * The default concurrency level for ...