<!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. 九度OJ 1340：小A的计算器 （进制转换）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:735 解决:202 题目描述: 以往的操作系统内部的数据表示都是二进制方式,小A新写了一个操作系统,系统内部的数据表示为26进制,其中0-2 ...

  2. Frobenius Norm

    http://mathworld.wolfram.com/FrobeniusNorm.html

  3. Learning string similarity measures for gene/protein name dictionary look-up using logistic regression

    Yoshimasa Tsuruoka1,*, John McNaught1,2, Jun’ichi Tsujii1,2,3 and Sophia Ananiadou1,2 1 School of Co ...

  4. CentOS查看和修改MySQL字符集

    通过以下命令查看了MySQL的字符集 连接上mysql服务,输入以下命令 mysql>show variables like 'character_set%'; 显示如下: 为了让MySQL支持 ...

  5. spring AOP操作

    在spring进行AOP操作,使用aspectj实现 一.aspectj准备 aspectj不是spring的一部分,和spring一起使用进行AOP的操作 1.除了spring基本的jar包还需要导 ...

  6. pinpoint本地开发——agent

    准备工作 执行maven打包 打包完成后,agent的包在agent/target/pinpoint-agent-1.6.2下面 重要配置文件 pinpoint.config profiler.col ...

  7. CentOS7 添加用户到 sudoers

    1.在装完系统后,CentOS默认普通用户是无法使用sudo命令的,这时我们就需要将登陆的用户加入/etc/sudoers 文件中 假设用户名是yhd 3.切换到超级用户:$ su - 当然输入的 p ...

  8. Kattis - friday 【数学】

    题意 每一年的第一天 都是星期天 然后 给出 一年的总天数 和 总月数 以及 每个月 的总天数 求出 有多少个星期五 是当月的13号 思路 对于 每个月 只要判断 当月的13号 是不是 星期五 就可以 ...

  9. P2487 [SDOI2011]拦截导弹

    题目 P2487 [SDOI2011]拦截导弹 做\(SDOI\)有种想评黑的感觉,果然还是太弱了 做法 独立写(调)代码三个小时祭 简化题目:求二维最长不上升子序列及每个点出现在最长不上升子序列概率 ...

  10. P3506 [POI2010]MOT-Monotonicity 2

    题目 P3506 [POI2010]MOT-Monotonicity 2 第一次切掉没题解的题\(qwq\) 做法 首先确定\(a_i\)的位置后显然就能确定\(a_{i+1}\)的位置,建一棵权值线 ...