<!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. 微服务架构 SpringBoot（一）

    spring Boot:官网地址 https://spring.io/ 由来: 随着spring组件功能的强大,配置文件也越来越复杂繁琐,背离了spring公司的简洁快速开发原理,2015年就推出Sp ...

  2. Tomcat系列（一）- 整体架构

    整体架构 我们想要了解一个框架,首先要了解它是干什么的,Tomcat我们都知道,是用于处理连接过来的Socket请求的.那么Tomcat就会有两个功能: 对外处理连接,将收到的字节流转化为自己想要的R ...

  3. Python活力练习Day5

    Day5:连续输入n个字符串,请按照长度为8拆分每个字符串后输出到新的字符串组:长度不是8的整数倍的字符串请在后面补数字0,其中,空字符串不做处理. eg : input :   2    12345 ...

  4. Docker常用命令-全

    原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接: https://app.yinxiang.com/shard/s17/nl/19391737/9f6bf39e- ...

  5. Java生鲜电商平台-生鲜系统中商品订单系统售后系统设计

    Java生鲜电商平台-生鲜系统中商品订单系统售后系统设计(服务订单履约系统) 说明: 电商之下,我们几乎能从电商平台上买到任何我们日常需要的商品,但是对于很多商品来说,用户购买发货后,只是整个交易流程 ...

  6. SAP QM 检验批里样品数量的确定

    SAP QM 检验批里样品数量的确定 如下的检验批890000045939, 样品数量是50 PC. 检查该检验批对应的检验计划, 这些检验特性都有自己的取样策略,相关的取样数量,体现在结果录入界面, ...

  7. Windows密码获取和破解(初探)

    Windows密码获取和破解 本文只是简单的讲明密码获取和破解 具体的操作细节均以模糊或具体代码混淆等方式避开 如有兴趣请自行研究,本文不做细说~~~ 获取思路: Windows密码一般是以" ...

  8. 让 Lua 访问数据库

    Lua 自身并没有提供访问数据库的函数,但是借助外部扩展库我们可以很容易实现对数据库的各种操作,下面就为大家介绍这样一个扩展库 - LuaSQL,你可以在下载区得到它. LuaSQL 定义了一套简单的 ...

  9. Java中数组与集合的相互转换

    数组与List的相互转换 List转数组:采用集合的toArray()方法 数组转List:采用Arrays的asList()方法 数组转换为集合 注意:在数组转集合的过程中,要注意是否使用了视图的方 ...

  10. Java编程思想——第17章 容器深入研究（一）

    这一章将学习散列机制是如何工作的,以及在使用散列容器时怎么样编写hashCode()和equals()方法. 一.容器分类 先上两张图 来概况完整的容器分类 再细说都为什么会有那些特性. 二.Coll ...