<!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. 启动/关闭Spring boot服务脚本

    启动Spring boot服务脚本 #!/bin/bash cd /test java -jar test.jar &> ./test.log & echo "成功&q ...

  2. jQuery-AJAX-格式

    function loadInfo(){    var domainName=$("input[name='domain-name']").val(); //域名    var c ...

  3. 我的Android进阶之旅------>启动Activity的标准Action和标准Category

    Android内部提供了大量标准的Action和Category常量. 除了参考本文外,您还可以参考了以下链接: http://developer.android.com/reference/andr ...

  4. 代替print输出的PY调试库：PySnooper

      PySnooper¶ Github:https://github.com/lotapp/PySnooper pip install pysnooper 使用:分析整个代码 @pysnooper.s ...

  5. linux基础part5

    linux 基础 一.网络基础 1.ifup 网卡名称:ifdown 网卡名称:ifconfig 网卡名称 ip 子网 其修改只是临时生效,一旦关机或重启命令失效,需要修改配置文件永久生效. 2.网卡 ...

  6. Python基础（2）_数字和字符串类型

    一.数据类型 1.数字 整型 Python的整型相当于C中的long型,Python中的整数可以用十进制,八进制,十六进制表示. >>> --------->默认十进制 > ...

  7. Floyd 学习笔记

    #include <cstdio> #include <cstring> #include <ctype.h> #include <cstdlib> # ...

  8. iOS9 - 采用3D Touch

    iPhone 6s/6s Plus提供了触摸屏的另一个维度的操作手势-3D Touch,通常有下面两种应用场景: 在主屏幕上重按APP图标可以提供进入APP特定功能的快捷菜单 在APP内部,可以通过重 ...

  9. 利用CocoaPods管理本地工程和发布开源框架

    发布自己三方框架 发布云端库 1.创建spec pod spec create xxx 2.编辑spec s.name:名称,pod search 搜索的关键词,注意这里一定要和.podspec的名称 ...

  10. 20145229吴姗珊 《Java程序设计》小总结

    20145229吴姗珊 <Java程序设计>小总结 教材学习内容总结 由于今天考试考到了操作题,根本无从下手,然后才意识到原来之前的学习都是蜻蜓点水,一味的把学习建立在给老师学,为家长学的 ...