<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>轮播图</title>

    <style>

        * {

            margin:0;

            padding:0;

        }

        a{

            text-decoration: none;

        }

        .container {

            position: relative;

            width: 600px;

            height: 400px;

            margin:100px auto 0 auto;

            box-shadow: 0 0 5px green;

            overflow: hidden;

        }

        .container .wrap {

            position: absolute;

            width: 4200px;

            height: 400px;

            z-index: 1;

        }

        .container .wrap img {

            float: left;

            width: 600px;

            height: 400px;

        }

        .container .buttons {

            position: absolute;

            right: 5px;

            bottom:40px;

            width: 150px;

            height: 10px;

            z-index: 2;

        }

        .container .buttons span {

            margin-left: 5px;

            display: inline-block;

            width: 20px;

            height: 20px;

            border-radius: 50%;

            background-color: green;

            text-align: center;

            color:white;

            cursor: pointer;

        }

        .container .buttons span.on{

            background-color: red;

        }

        .container .arrow {

            position: absolute;

            top: 35%;

            color: green;

            padding:0px 14px;

            border-radius: 50%;

            font-size: 50px;

            z-index: 2;

            display: none;

        }

        .container .arrow_left {

            left: 10px;

        }

        .container .arrow_right {

            right: 10px;

        }

        .container:hover .arrow {

            display: block;

        }

        .container .arrow:hover {

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

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="wrap" style="left: -600px;">

            <img src="./img/5.jpg" alt="">

            <img src="./img/1.jpg" alt="">

            <img src="./img/2.jpg" alt="">

            <img src="./img/3.jpg" alt="">

            <img src="./img/4.jpg" alt="">

            <img src="./img/5.jpg" alt="">

            <img src="./img/1.jpg" alt="">

        </div>

        <div class="buttons">

            <span class="on">1</span>

            <span>2</span>

            <span>3</span>

            <span>4</span>

            <span>5</span>

        </div>

        <a href="javascript:;" class="arrow arrow_left">&lt;</a>

        <a href="javascript:;" class="arrow arrow_right">&gt;</a>

    </div>

    <script>

        var wrap = document.querySelector(".wrap");

        var next = document.querySelector(".arrow_right");

        var prev = document.querySelector(".arrow_left");

        next.onclick = function () {

            next_pic();

        }

        prev.onclick = function () {

            prev_pic();

        }

        function next_pic () {

            index++;

            if(index > 4){

                index = 0;

            }

            showCurrentDot();

            var newLeft;

            if(wrap.style.left === "-3600px"){

                newLeft = -1200;

            }else{

                newLeft = parseInt(wrap.style.left)-600;

            }

            wrap.style.left = newLeft + "px";

        }

        function prev_pic () {

            index--;

            if(index < 0){

                index = 4;

            }

            showCurrentDot();

            var newLeft;

            if(wrap.style.left === "0px"){

                newLeft = -2400;

            }else{

                newLeft = parseInt(wrap.style.left)+600;

            }

            wrap.style.left = newLeft + "px";

        }

        var timer = null;

        function autoPlay () {

            timer = setInterval(function () {

                next_pic();

            },2000);

        }

        autoPlay();

        var container = document.querySelector(".container");

        container.onmouseenter = function () {

            clearInterval(timer);

        }

        container.onmouseleave = function () {

            autoPlay();

        }

        var index = 0;

        var dots = document.getElementsByTagName("span");

        function showCurrentDot () {

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

                dots[i].className = "";

            }

            dots[index].className = "on";

        }

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

            (function(i){

                dots[i].onclick = function () {

                    var dis = index - i;

                    if(index == 4 && parseInt(wrap.style.left)!==-3000){

                        dis = dis - 5;

                    }

                    //和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可

                    if(index == 0 && parseInt(wrap.style.left)!== -600){

                        dis = 5 + dis;

                    }

                    wrap.style.left = (parseInt(wrap.style.left) +  dis * 600)+"px";

                    index = i;

                    showCurrentDot();

                }

            })(i);

        }

    </script>

</body>

</html>

原生JS实现轮播效果的更多相关文章

  1. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  2. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  3. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  4. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  5. 使用原生js将轮播图组件化

    代码地址如下:http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...

  6. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...

  7. js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...

  8. 原生js焦点轮播图的实现

    继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...

  9. 原生JS设计轮播图

    一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2. ...

随机推荐

  1. UML用例关系一览

  2. 前端混淆--JavaScript Obfuscator

    引言: 前端代码是直接暴漏在浏览器中的,很多web攻击都是通过直接debug业务逻辑找到漏洞进行攻击,另外还有些喜欢“不劳而获”的分子暴力盗取他人网页简单修改后用来获利,总体上来说就是前端的逻辑太容易 ...

  3. Byword for Mac(Markdown编辑器)中文版

    还在找Markdown编辑器吗?那不妨试试Byword for Mac吧!这是一款轻量级的富文本编辑器,byword mac版提供了完整的Markdown支持,包含脚注.表格.交叉引用等功能,Bywo ...

  4. 利用dladdr来获得so自身的路径

    #include <dlfcn.h> //定义该函数为了dladdr获取符号信息 void fun1() { } Dl_info info; //dladdr获取某个地址的符号信息 int ...

  5. (转)Pycharm在Ubuntu 16.04 系统中tensorflow导入报错

    今天下午在配置pycharm时一直出现tensorflow不能导入的错误,如下图所示: 通过以下步骤可以解决问题: 步骤一: 1)在pycharm安装目录下,进入bin目录(一般情况下我们下载解压py ...

  6. locust压测rpc协议

    这里主要是google的grpc接口进行压测的一个栗子. Locust是以HTTP为主要目标构建的. 但是,通过编写钩子触发器request_success和 request_failure事件的自定 ...

  7. Vue学习之路---No.3（分享心得，欢迎批评指正）

    同样的,我们先来回顾一下昨天学习的内容: 1.利用v-once来组织双向绑定 2.filter{}过滤器的使用(详情请看上一章) 3.computed(计算属性),利用computed属性实现filt ...

  8. 关于config文件中AppSettings和ConnectionStrings的用法跟区别（转）

    转自:http://www.cnblogs.com/bindot/archive/2013/03/07/def.html

  9. liunx驱动----异步通知

    查询:消耗资源 中断:read 一直要去读 poll :指定起始时间 异步通知 signal 测试程序 include <stdio.h> include <signal.h> ...

  10. PyCharm下使用Scrapy建立爬虫项目--MyFirstSpiderObject

    首先下载并安装Anaconda3以及PyCharm Anaconda3选中添加环境变量,如果忘记选中可以手动在path中添加如下环境变量 建文件夹scrapy 安装scrapy cmd进入对应目录,执 ...