<!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. Winform项目常用配置方法

    在我们做项目的时候经常遇到需要动态配置系统的情况,比如说10台电脑装了同一个软件,需要识别唯一码,这时候我们会用到配置方法. 具体方法如下: 1) Config文件 里面增加你需要的变量,具体用法如下 ...

  2. spring boot 2 + shiro 实现权限管理

    Shiro是一个功能强大且易于使用的Java安全框架,主要功能有身份验证.授权.加密和会话管理.看了网上一些文章,下面2篇文章写得不错.Springboot2.0 集成shiro权限管理 Spring ...

  3. day07什么是方法、方法的定义、方法的调用

    复习 1.数组 1)什么是数组 数组就是一种能够保存 多个相同数据类型的数据的变量 2)为什么使用数组 3)数组的构成 3.1)数组名 3.2)数组元素 3.3)数组长度 3.4)数组下标 4)数组的 ...

  4. 第一个MyBatis程序(博客初写者)

    第一个Mybatis程序 一.环境: 1.JDK1.8 2.MYSQL5.7 3.IDEA 4.MAVEN 3.63 二.Mybatis认识: 1.查看官方文档 https://mybatis.org ...

  5. Sqlite—删除语句(Delete)

    SQLite 的 DELETE 语句用于删除表中已有的记录.可以使用带有 WHERE 子句的 DELETE 查询来删除选定行,否则所有的记录都会被删除. SQLite 要清空表记录,只能使用Delet ...

  6. 配置Servlet 容器

    SpringBoot默认使用Tomcat作为嵌入式的Servlet容器: 1.如何定制和修改Servlet容器的相关配置: 1.修改和server有关的配置(ServerProperties[也是Em ...

  7. 【.net core 入坑】.net core 3.0 报错：在 FETCH 语句中选项 NEXT 的用法无效

    目录 1.事故现场: 2.分析及解决方案: 1.事故现场: 在项目中使用.net core 3.0,在EF链接sqlserver2008,在程序中使用了分页用的skip和take,程序报错: 在 FE ...

  8. abp大文件附件功能视频教程

    视频分享地址:https://share.weiyun.com/5wtofib

  9. java map在JSTL EL中的小应用--<c:forEach>遍历Map<>泛型

    准 备 数 据 :(自己准备吧少年,考验你时候到了!!) /** 结构示意图: 类型: List集合 map对象 LIst集合 Person类对象 String name : int age mLis ...

  10. Power BI 概念及 国内版Pro 试用账户注册流程

    视频内容: Power BI 基本概念:https://v.qq.com/x/page/s3026nn69eu.html Power BI Pro 世纪互联版本试用账号注册:https://v.qq. ...