<!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. c++-类与类的关系

    类与类的关系 #define _CRT_SECURE_NO_WARNINGS #include <iostream> using namespace std; class A { publ ...

  2. inux 磁盘监控分析

    一.查看磁盘空间  1. df -h Size 分割区总容量 Used 已使用的大小 Avail 剩下的大小 Use% 使用的百分比 Mounted on 路径地址 2.查看目录的空间 du -sh  ...

  3. Nginx安装与运行

    目录 Nginx安装与运行 安装Nginx 运行 注意事项 Nginx安装与运行 安装Nginx 在Nginx官网下载对应的nginx包(推荐使用稳定版[Stable version]) 上传ngin ...

  4. 【linux命令】软连接和硬链接的区别（ln命令）

    Linux 文件系统把硬盘分为三个部分:超级块.inode 列表.数据区 inode 指示:该文件的数据存放在数据区的哪些块内.因为这个“映射”关系不能变更,因此,inode 相当于代表着文件本身.( ...

  5. 关于c#winform用sharpGL(OpenGL)绘制不出图形，绘制窗口是个黑框的坑

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11790309.html 在c++的opengl中可能是因为是最基本的库,很多东西都把你做好了 ...

  6. Maven pom.xml文件深度学习

    本文介绍Maven项目构建中,pom.xml文件的生成规则和常用节点的使用方法.pom.xml官方网址:http://maven.apache.org/pom.html pom简介 pom作为项目对象 ...

  7. 字节跳动——IT技术工程师面试题

    .自我介绍 .项目介绍 .争对个人项目进行提问 .场景模拟 .1如何知道用户的指定视频(类似于QQ发视频)的服务是正常的 .使用appum进行自动化测试 .使用bat脚本获取进程状态,然后定时发送em ...

  8. How to: Implement File Data Properties 如何:实现文件数据属性

    This topic demonstrates how to implement a business class with a file data property and a file colle ...

  9. OSG绘制空间凹多边形并计算其面积

    目录 1. 思路 1) 多边形分格化 2) 几何图元遍历 2. 实现 3. 参考 1. 思路 这个问题其实涉及到OSG中的两个问题:多边形分格化和几何图元遍历. 1) 多边形分格化 在OpenGL/O ...

  10. Android View的background和padding

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/181 最近在做一个需求,是对im聊天消息设置气泡背景,之前 ...