<!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. 一些blog地址总结整理:

    女神 python之路-网络编程初版:https://www.cnblogs.com/Eva-J/articles/8066842.html python之路-网络编程(重点看这个,更细致):http ...

  2. shu7-19【背包和母函数练习】

    题目:http://acm.hdu.edu.cn/diy/contest_show.php?cid=20083 密码:shuacm 感觉他们学校的新生训练出的比较好. 今天很多题目都是强化了背包的转化 ...

  3. java堆分析神器MAT

    Memory Analyzer(MAT) 基于Eclipse的软件 http://www.eclipse.org/mat/

  4. CentOS7.x 报错 There are no enabled repos.

    地址 :http://mirrors.163.com/centos/7/os/x86_64/Packages/   wget http://mirrors.163.com/centos/7/os/x8 ...

  5. Symfony 使用KnpTimeBundle

    使用time_diff时出现:diff.ago.hour; 解决:1:引入"knplabs/knp-time-bundle": "^1.7",https://g ...

  6. IDEA报错： Invalid bound statement (not found): com.test.mapper.UserMapper.selectByPrimaryKey（转发：https://www.cnblogs.com/woshimrf/p/5138726.html）

    学习mybatis的过程中,测试mapper自动代理的时候一直出错,在eclipse中可以正常运行,而同样的代码在idea中却无法成功.虽然可以继续调试,但心里总是纠结原因.百度了好久,终于找到一个合 ...

  7. 论文解析 "A Non-Local Cost Aggregation Method for Stereo Matching"

    传统的使用窗口的方法缺陷主要在 1.窗口外的像素不能参与匹配判断. 2.在低纹理区域很容易产生错误匹配 论文的主要贡献在代价聚类上(左右图像带匹配点/区域的匹配代价计算),目标是图像内所有点都对该点传 ...

  8. Data Structure Binary Tree: Inorder Tree Traversal without Recursion

    http://www.geeksforgeeks.org/inorder-tree-traversal-without-recursion/ #include <iostream> #in ...

  9. C语言中的位操作（16）--计算二进制数字尾部连续0的数目

    本篇文章介绍计算二进制数字尾部连续0的数目的相关算法,例如:v=(1101000)2,该数尾部连续0的数目=3 方法1:线性时间算法 unsigned int v; // 需要计算的目标整数 int ...

  10. BZOJ 4199 [Noi2015]品酒大会：后缀数组 + 并查集

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4199 题意: 给你一个长度为n的字符串s,和一个长为n的数组v. 对于每个整数r∈[0,n ...