<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

            text-decoration: none;

        }

        body {

            padding: 20px;

        }

        #container {

            position: relative;

            width: 600px;

            height: 400px;

            border: 3px solid #333;

            overflow: hidden;

        }

        #list {

            position: absolute;

            z-index: 1;

            width: 4200px;

            height: 400px;

        }

        #list img {

            float: left;

            width: 600px;

            height: 400px;

        }

        #buttons {

            position: absolute;

            left: 250px;

            bottom: 20px;

            z-index: 2;

            height: 10px;

            width: 100px;

        }

        #buttons span {

            float: left;

            margin-right: 5px;

            width: 10px;

            height: 10px;

            border: 1px solid #fff;

            border-radius: 50%;

            background: #333;

            cursor: pointer;

        }

        #buttons .on {

            background: orangered;

        }

        .arrow {

            position: absolute;

            top: 180px;

            z-index: 2;

            display: none;

            width: 40px;

            height: 40px;

            font-size: 36px;

            font-weight: bold;

            line-height: 39px;

            text-align: center;

            color: #fff;

            background-color: RGBA(0, 0, 0, .3);

            cursor: pointer;

        }

        .arrow:hover {

            background-color: RGBA(0, 0, 0, .7);

        }

        #container:hover .arrow {

            display: block;

        }

        #prev {

            left: 20px;

        }

        #next {

            right: 20px;

        }

    </style>

    <script type="text/javascript">

        window.onload = function() {

            var container = document.getElementById('container');

            var list = document.getElementById('list');

            var buttons = document.getElementById('buttons').getElementsByTagName('span');

            var prev = document.getElementById('prev');

            var next = document.getElementById('next');

            var index = 1;

            var timer;

            function animate(offset) {

                //获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，

                //且style.left获取的是字符串，需要用parseInt()取整转化为数字。

                var newLeft = parseInt(list.style.left) + offset;

                list.style.left = newLeft + 'px';

                //无限滚动判断

                if (newLeft > -600) {

                    list.style.left = -3000 + 'px';

                }

                if (newLeft < -3000) {

                    list.style.left = -600 + 'px';

                }

            }

            function play() {

                //重复执行的定时器

                timer = setInterval(function() {

                    next.onclick();

                }, 2000)

            }

            function stop() {

                clearInterval(timer);

            }

            function buttonsShow() {

                //将之前的小圆点的样式清除

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

                    if (buttons[i].className == "on") {

                        buttons[i].className = "";

                    }

                }

                //数组从0开始，故index需要-1

                buttons[index - 1].className = "on";

            }

            prev.onclick = function() {

                index -= 1;

                if (index < 1) {

                    index = 5

                }

                buttonsShow();

                animate(600);

            };

            next.onclick = function() {

                //由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断

                index += 1;

                if (index > 5) {

                    index = 1

                }

                animate(-600);

                buttonsShow();

            };

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

                (function(i) {

                    buttons[i].onclick = function() {

                        /*   这里获得鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上，去谷歌this的用法  */

                        /*   由于这里的index是自定义属性，需要用到getAttribute()这个DOM2级方法，去获取自定义index的属性*/

                        var clickIndex = parseInt(this.getAttribute('index'));

                        var offset = 600 * (index - clickIndex); //这个index是当前图片停留时的index

                        animate(offset);

                        index = clickIndex; //存放鼠标点击后的位置，用于小圆点的正常显示

                        buttonsShow();

                    }

                })(i)

            }

            container.onmouseover = stop;

            container.onmouseout = play;

            play();

        }

    </script>

</head>

<body>

    <div id="container">

        <div id="list" style="left: -600px;">

            <img src="http://images2015.cnblogs.com/blog/32818/201705/32818-20170527142827341-239546623.jpg" alt="1" />

            <img src="http://images2015.cnblogs.com/blog/32818/201705/32818-20170527142827341-239546623.jpg" alt="1" />

            <img src="http://img.netbian.com/file/2017/0717/9bba6a121f15845698285e7ab3bbda13.jpg" alt="2" />

            <img src="http://img.netbian.com/file/2017/0724/bb823c2d94eb4a7b17920ed8d4458c23.jpg" alt="3" />

            <img src="http://img.netbian.com/file/2017/0724/93e1f7585986374bf6903e4f95c4fa93.jpg" alt="4" />

            <img src="http://img.netbian.com/file/2017/0718/1100e085b03b989d6c2691e7224485af.jpg" alt="5" />

            <img src="http://img.netbian.com/file/2017/0724/d8ed03e528840690fdfe89cacba8eb92.jpg" alt="5" />

        </div>

        <div id="buttons">

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

            <span index="2"></span>

            <span index="3"></span>

            <span index="4"></span>

            <span index="5"></span>

        </div>

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

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

    </div>

</body>

</html>

实用的原生js图片轮播的更多相关文章

  1. js 图片轮播简单版

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

  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写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...

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

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

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

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

  9. JS图片轮播[左右轮播

    直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

随机推荐

  1. VS2017下编译iconv

    从http://www.gnu.org/software/libiconv/ 下载 libiconv-1.11.1, 这是最后一个支持MSVC编译的版本. 打开 Visual Studio 2017 ...

  2. Linux中rpm包管理器

    包全名: 1.操作的包是没有安装的软件包时,使用全名,而且要注意路径 2.例如:jdk-8u131-linux-x64.rpm包名: 1.操作的是已经安装好的软件包,使用包名,是搜索/var/lib/ ...

  3. spring项目改名后不能启动的原因及解决办法

    今日修改了一个spring项目的项目名称,修改后启动项目Debug as->Debug on server,过了很久也没有出现web首页,仔细看项目的定时器已经启动,eclipse的Consol ...

  4. 获取comboBox里面的item使用的方法

    使用currentIndex()或者currentText() void Widget::calc() { int first = ui->firstLineEdit->text().to ...

  5. shell一些方法

    字符串截取转自原文地址:http://www.jb51.net/article/56563.htm 一:字符串截取 有var变量: var=http://www.aaa.com/123.htm 1. ...

  6. zookeeper学习与实战（二）集群部署

    上一篇介绍了单机版zookeeper安装,这种情况一般用于开发测试.如果是生产环境建议用分布式集群部署,防止单点故障,增加zookeeper服务的高可用. [环境介绍]       三台机器:192. ...

  7. Git 远程仓库 git remote

    http://blog.csdn.net/s0228g0228/article/details/45368155 Git remote -v 查看现有远程仓库的地址url 三种方式都可以. 1. 修改 ...

  8. Netty入门例子

    新建maven项目,添加依赖 <!-- https://mvnrepository.com/artifact/io.netty/netty-all --> <dependency&g ...

  9. fastjson 格式化自定义选项

    QuoteFieldNames———-输出key时是否使用双引号,默认为true WriteMapNullValue——–是否输出值为null的字段,默认为false WriteNullNumberA ...

  10. Spark- SparkStreaming可更新状态的实例

    Producer package zx.zx.sparkkafka import java.util.Properties import kafka.producer.{KeyedMessage, P ...