需求：

1、页面需要小图标和箭头

2、定时器不断的滑动图片

3、在点击箭头时，图标和图片随即做出响应

核心思想：

1、往左移动到第一张的情况：在第二张移动到第一张时，这个动画效果完成之后，立刻将ul的left位置切换到最后一张的位置。

2、往右移动到最后一张的情况：在倒数第二张移动到最后一张时，这个动画效果完成之后，立刻将ul的left位置切换到第一张的位置

3、以上两点效果实现的基础是，第一张图片和最后一张图片是一样的。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            padding: 0;

            margin: 0;

            list-style: none;

        }

        .box {

            width: 500px;

            height: 200px;

            padding: 5px;

            border: 1px solid #ccc;

            margin: 150px auto;

        }

        .content {

            width: 500px;

            height: 200px;

            overflow: hidden;

            position: relative;

        }

        .content ul {

            width: 600%;

            position: absolute;

        }

        .content li {

            float: left;

        }

        .content ol {

            position: absolute;

            bottom: 14px;

            right: 20px;

        }

        .content ol li {

            float: left;

            width: 20px;

            height: 20px;

            background-color: #fff;

            font: 500 17px/20px "simsun";

            text-align: center;

            margin-right: 15px;

            cursor: pointer;

        }

        .arrow {

            display: none;

        }

        .arrow span {

            position: absolute;

            top: 50%;

            margin-top: -20px;

            width: 30px;

            height: 40px;

            background-color: rgba(255, 228, 206, 0.3);

            text-align: center;

            font: 400 20px/40px "simsun";

            border: 1px solid #fff;

            cursor: pointer;

        }

        .arr-left {

            left: 5px;

            border-radius: 0 5px 5px 0;

        }

        .arr-right {

            right: 5px;

            border-radius: 5px 0 0 5px;

        }

        .content .current {

            background-color: yellow;

        }

    </style>

</head>

<body>

<div class="box" id="scrollImg">

    <div class="content">

        <ul>

            <li><img src="data:images/1.jpg"></li>

            <li><img src="data:images/2.jpg"></li>

            <li><img src="data:images/3.jpg"></li>

            <li><img src="data:images/4.jpg"></li>

            <li><img src="data:images/5.jpg"></li>

        </ul>

        <ol></ol>

        <div class="arrow">

            <span class="arr-left"><</span>

            <span class="arr-right">></span>

        </div>

    </div>

</div>

<script>

    var divEle = document.getElementById("scrollImg");

    var ulEle = divEle.children[0].children[0];

    var imgWidth = divEle.children[0].offsetWidth;

    var olEle = divEle.children[0].children[1];

    var arrEle = divEle.children[0].children[2];

    //1、在第五张图片后放置第一张图片

    var firstImg = ulEle.children[0].cloneNode(true);

    ulEle.appendChild(firstImg);

    //2、创建5个小图标

    for (var i = 0; i < ulEle.children.length - 1; i++) {

        var liEle = document.createElement("li");

        liEle.innerHTML = i + 1;

        olEle.appendChild(liEle);

    }

    //3、点亮第一个小图标

    olEle.children[0].className = "current";

    //4、鼠标放到小图标上轮播图片

    var olLiArr = olEle.children;

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

        olLiArr[i].index = i;

        olLiArr[i].onmouseover = function () {

            for (var j = 0; j < olLiArr.length; j++) {

                olLiArr[j].className = "";

            }

            this.className = "current";

            animate(ulEle, -imgWidth * this.index);

            key = square = this.index;

        }

    }

    //5、添加定时器

    var timer = setInterval(autoPaly, 1000);

    var key = 0;

    var square = 0;

    //图片1秒钟滑动一次，并且对应的小图片也随机点亮

    //当key=5时是第5张图片向第6张图片移动（第6张也就是第1张）

    //当key=6时其实是第1张向第2张图片移动，此时我们立刻更改ul的left值，达到了偷梁换柱的效果

    function autoPaly() {

        key++;

        if (key > olLiArr.length) {//key=6立刻将key=1

            ulEle.style.left = 0;

            key = 1;

        }

        animate(ulEle, -imgWidth * key);

        square++;

        if (key === olLiArr.length) {//当key=5时，此时已经滑动到了第一张图片，所以square=0

            square = 0;

        }

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

            olLiArr[i].className = "";

        }

        olLiArr[square].className = "current";

    }

    //6、鼠标放上去清除定时器，移开后在开启定时器

    divEle.onmouseover = function () {

        arrEle.style.display = "block";

        clearInterval(timer);

    }

    //在清除定时器时，因为key与square都是全局变量

    //所以当再次开启定时器时，函数依然按照原来计划执行

    divEle.onmouseout = function () {

        arrEle.style.display = "none";

        timer = setInterval(autoPaly, 1000);

    }

    //7、左右箭头切换图片

    arrEle.children[0].onclick = function () {

        key--;

        if (key < 0) {//key=-1时立刻换到最后一张图片，并将key值赋值成倒数第二张图片的数值

            ulEle.style.left = -olLiArr.length * imgWidth + "px";

            key = olLiArr.length - 1;

        }

        animate(ulEle, -imgWidth * key);

        square--;

        if (key < 0) {//当key=5时，此时已经滑动到了第一张图片，所以square=0

            square = 4;

        }

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

            olLiArr[i].className = "";

        }

        olLiArr[square].className = "current";

    }

    arrEle.children[1].onclick = function () {

        autoPaly();

    }

    //图片移动

    function animate(ele, target) {

        clearInterval(ele.timer);

        var speed = ele.offsetLeft < target ? 15 : -15;

        ele.timer = setInterval(function () {

            ele.style.left = ele.offsetLeft + speed + "px";

            var value = ele.offsetLeft - target;

            if (Math.abs(value) <= Math.abs(speed)) {

                ele.style.left = target + "px";

                clearInterval(ele.timer);

            }

        }, 10);

    }

</script>

</body>

</html>

JS——轮播图高级版的更多相关文章

  1. JS——轮播图简单版

    1.小图标版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. JavaScript的案例（数据校验，js轮播图，页面定时弹窗）

    1.数据校验            步骤            1.确定事件(onsubmit)并绑定一个函数            2.书写这个函数,获取数据,并绑定id            3. ...

  3. 纯js轮播图练习-2，js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  4. 纯js轮播图练习-1

    偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...

  5. javascript原生js轮播图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JS轮播图（网易云轮播图）

    JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...

  7. 手把手原生js轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  8. jquery, js轮播图插件Swiper3

    轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...

  9. JS —— 轮播图中的缓动函数的封装

    轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...

随机推荐

  1. CodeForces 362C

    分析:首先我们要知道调用swap()函数的次数跟什么有关.可以观察发现在Insertion Sort里,当且仅当a[j](j∈[0,i)) > a[i]时会调用一次swap(),也就是说有多少个 ...

  2. PHP array_keys()

    定义和用法 array_keys() 函数返回包含数组中所有键名的一个新数组. 如果提供了第二个参数,则只返回键值为该值的键名. 如果 strict 参数指定为 true,则 PHP 会使用全等比较 ...

  3. android自己定义之 5.0 风格progressBar

    近期做项目,用到了ProgressBar .就想到了要使用Android5.0 的效果,就随手实现了一下. 效果图: 大概的思路: 1. 圆圈通过Canvas去绘制 2.圆圈的动画通过Animator ...

  4. Android面试题1

    1.Android中intent的是? 答:实现界面间的切换,能够包括动作和动作数据.连接四大组件的纽带. 2.SAX解析xml文件的长处的是? 答:不用事先调入整个文档,占用资源少 3.在andro ...

  5. python-paramiko初体验

    什么pexpect.pxshll在paramiko面前都是浮云,重要的是paramiko支持windows. 小试牛刀 import paramiko paramiko.util.log_to_fil ...

  6. objc_setAssociatedObject

    学习笔记:通过 objc_setAssociatedObject alert 和 button关联 及传值 标签: ios 2013-11-22 16:25 7924人阅读 评论(1) 收藏 举报   ...

  7. 学习C语言，困难吗？

            要说计算机如今什么最火.无异于网络.看看各大计算机站点,满眼尽是网络project师,什么IP啊,路由啊,虚拟机啊,总之,操作性的计算机技能牢牢占领了半壁江山. 这些技巧当然重要.可是 ...

  8. C++ 訪问控制权限图解

    基类訪问权限 类继承方式 子类訪问权限           public   public   protected public protected   private   No Access   p ...

  9. java及前端请求跨域问题

    主要代码:<meta http-equiv="Access-Control-Allow-Origin" content="*"> 说明一下什么情况下 ...

  10. Hackerrank Connected Cell in a Grid

    Problem Statement You are given a matrix with m rows and n columns of cells, each of which contains ...