<!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 1205：N阶楼梯上楼问题 （斐波那契数列）

    时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:3739 解决:1470 题目描述: N阶楼梯上楼问题:一次可以走两阶或一阶,问有多少种上楼方式.(要求采用非递归) 输入: 输入包括一个整 ...

  2. iOS设备获取总结

    1.获取iOS设备的各种信息 // 这个方法后面会列出来 NSString *deviceName = [self getDeviceName]; NSLog(@"设备型号-->%@& ...

  3. iOS 多线程（队列、任务、串行、并行、同步、异步）

  4. CMDB的四种模式

    为什么要有CMDB? CMDB --Configuration Management Database 配置管理数据库. 1.为了实现资产的自动采集,资产的自动更新, 为了搭建公司自动化平台的基础则需 ...

  5. spring+hibernate+springmvc整合框架搭建

    搭建maven web项目这里不再讲述,详情请查看http://www.cnblogs.com/wql025/p/5215570.html 现在讲述项目的搭建过程. 1.通过maven导入项目所用的j ...

  6. 【HTTP】初识代理

    Web代理(proxy)位于客户端和服务器端之间.HTTP的代理服务器既是Web服务器端又是Web客户端. 1. 代理和网关的对比 代理连接的是两个或者多个使用相同协议的应用程序. 网关连接的是两个或 ...

  7. iOS UITableView滚动头图 拉伸放大效果 (头部弹性效果) 增加iOS11支持 附有demo

    今天修改日期为2017年11月25日 两个月前做了iOS11的bug修复,才对博客进行更新,见谅. 在iOS11上需要注意两个问题 1.使用UIScrollview,UITableView,UIWeb ...

  8. [原创]java WEB学习笔记19：初识MVC 设计模式：查询，删除 练习(理解思想)，小结 ，问题

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  9. CSS3自定义下拉框菜单

    在线演示 本地下载

  10. 20145229吴姗珊《JAVA程序设计》第一周学习总结

    教材学习内容总结 第一章 JAVA 平台概论 1.JAVA不仅仅是一门程序设计语言,还是标准规范 2.1995年5月23日被公认为JAVA的诞生日 3.J2SE包含了JDK和JAVA程序语言 4.三大 ...