轮播图的基本原理

来源：互联网发布：过敏源测试知乎编辑：程序博客网时间：2024/06/05 09:27

通过以下的5个过程，实现轮播图的轮播效果
1.动态生成结构

创建元素和插入元素的方法分别是什么？
- 创建元素：document.creatElement( tagName ) var li = document.creatElement(“li”)；
  插入元素：appendChild( element ) ol.appendChild(“li”);
通过什么方法复制第一张图片元素？
- 通过cloneNode()方法来复制元素：eg . var firstImg = ulLis[0].cloneNode(true)；
- 其中cloneNode方法中，如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点

2.鼠标经过按钮

鼠标经过时如何改变按钮样式？
- a. 清除所有按钮的样式
  for (var j = 0; j < olLis.length; j++) { olLis[j].className = “”; }
- b. 给当前鼠标所在按钮添加特殊样式
  this.className = “current”;
鼠标经过按钮时如何计算图片盒子移动的距离?
- 通过按钮索引值（this.index）和图片的宽度（imgWidth）来计算图片盒子要移动的距离（target）
  `target = - this.index * imgWidth

3.鼠标点击箭头

通过什么属性改变左右箭头的隐藏和显示？
- 通过控制左右箭头盒子的display属性来控制左右箭头盒子的显示（block）和隐藏（none）
通过什么机制来统一左/右箭头点击时图片切换为当前图片的上/下一张？
- 利用全局变量来统一左右箭头切换图片，在左右箭头点击时，通过pic来计算图片盒子移动的目标位置
  var target = -pic * imgWidth;
- 当点击左箭头时：pic– –这样target比当前位置数值大imgWidth 图片盒子向右移动一张图片的距离显示出上一张图片
- 当点击右箭头时：pic++ 这样target比当前位置数值小imgWidth 图片盒子向左移动一张图片的距离显示出下一张图片
  4.按钮随之变化
square的取值范围以及其与pic对应情况

5.添加自动滚动

图片自动播放下一张和点击右箭头的操作相同

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        * {            padding: 0;            margin: 0;            list-style: none;            border: 0;        }        .all {            width: 500px;            height: 200px;            padding: 7px;            border: 1px solid #ccc;            margin: 100px auto;            position: relative;        }        .screen {            width: 500px;            height: 200px;            /*overflow: hidden;*/            position: relative;        }        .screen li {            width: 500px;            height: 200px;            overflow: hidden;            float: left;        }        .screen ul {            position: absolute;            left: 0;            top: 0px;            width: 3000px;        }        .all ol {            position: absolute;            right: 10px;            bottom: 10px;            line-height: 20px;            text-align: center;        }        .all ol li {            float: left;            width: 20px;            height: 20px;            background: #fff;            border: 1px solid #ccc;            margin-left: 10px;            cursor: pointer;        }        .all ol li.current {            background: yellow;        }        #arr {            display: none;        }        #arr span {            width: 40px;            height: 40px;            position: absolute;            left: 5px;            top: 50%;            margin-top: -20px;            background: #000;            cursor: pointer;            line-height: 40px;            text-align: center;            font-weight: bold;            font-family: '黑体';            font-size: 30px;            color: #fff;            opacity: 0.3;            border: 1px solid #fff;        }        #arr #right {            right: 5px;            left: auto;        }    </style></head><body><div class="all" id='box'>    <div class="screen">        <ul>            <li><img src="images/1.jpg" width="500" height="200"/></li>            <li><img src="images/2.jpg" width="500" height="200"/></li>            <li><img src="images/3.jpg" width="500" height="200"/></li>            <li><img src="images/4.jpg" width="500" height="200"/></li>            <li><img src="images/5.jpg" width="500" height="200"/></li>        </ul>        <ol>        </ol>    </div>    <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div></div></body></html><script>    //要做事先找人    var box = document.getElementById("box");    var screen = box.children[0];    var ul = screen.children[0];    var ol = screen.children[1];    var ulLis = ul.children;//所有的图片    var imgWidth = screen.offsetWidth;    var arr = document.getElementById("arr");    var arrRight = document.getElementById("right");    var arrLeft = document.getElementById("left");    var timer = null;    //alert(imgWidth);    //1.动态生成结构    //1.1根据图片的数量动态生成按钮    for (var i = 0; i < ulLis.length; i++) {        //动态生成按钮        var li = document.createElement("li");        //给li添加序号        //索引号是从0开始的        //序号=索引号+1        li.innerHTML = i + 1;        //追加到ol下面        ol.appendChild(li);    }    var olLis = ol.children;//必须生成之后才能获取到    olLis[0].className = "current";    //1.2把第一张图片追加到最后    //复制第一张图片    var firstImg = ulLis[0].cloneNode(true);    //追加到ul后面    ul.appendChild(firstImg);    //2.鼠标经过按钮    //循环遍历 给每一个按钮绑定鼠标经过事件    for (var j = 0; j < olLis.length; j++) {        olLis[j].index = j;        olLis[j].onmouseover = function () {            //按钮排他            //干掉所有人            for (var k = 0; k < olLis.length; k++) {                olLis[k].className = "";            }            //留下我自己            this.className = "current";            //根据索引号 通过动画函数移动ul            //图片移动的位置 和 当前按钮索引号 和 图片宽度有关 而且是负数            var target = -this.index * imgWidth;            animate(ul, target);            //将应该显示的图片的索引号 和 鼠标经过的按钮的索引号 进行统一            pic = this.index;            //将应该亮起的按钮的索引号 和 鼠标经过的按钮的索引号 进行统一            square = this.index;        }    }    //3.鼠标点击箭头    //鼠标经过box显示arr 清理定时器停止自动播放    box.onmouseover = function () {        arr.style.display = "block";        clearInterval(timer);    }    //鼠标离开box隐藏arr 设置定时器继续自动播放    box.onmouseout = function () {        arr.style.display = "none";        timer = setInterval(playNext, 1000);    }    //点击 右箭头 显示下一张    var pic = 0;//pic表示当前图片的索引    var square = 0;//square表示当前按钮的索引    arrRight.onclick = function () {        playNext();    }    arrLeft.onclick = function () {        //判断当前图片的索引pic是否等于最后一张图片的索引ulLis.length-1        if (pic == 0) {            pic = ulLis.length - 1;            ul.style.left = -(ulLis.length - 1) * imgWidth + "px";        }        pic--;        //通过动画函数对ul进行移动        //target 和 图片索引 和 图片宽度 有关 而且是负数        var target = -pic * imgWidth;        animate(ul, target);        //按钮也应该自动播放        //如果当前按钮的索引号square大于第一个按钮的索引号0 就--        if (square > 0) {            square--;        } else {            //如果square等于零 说明到第一个了 这时就应该把他变成最后一个            square = olLis.length - 1;        }        //干掉所有人        for (var i = 0; i < olLis.length; i++) {            olLis[i].className = "";        }        //留下我自己        olLis[square].className = "current";    }    //4.添加自动滚动    timer = setInterval(playNext, 1000)    function playNext() {        //先判断当前图片的索引pic是否等于最后一张图片的索引ulLis.length-1        //如果相等马上跳过去然后在执行动画效果 从而实现无缝滚动        //并且把索引号也归零        if (pic == ulLis.length - 1) {            ul.style.left = 0;            pic = 0;        }        pic++;//pic++相当于 pic=pic+1;        //通过动画函数对ul进行移动        //target 和 图片索引 和 图片宽度 有关 而且是负数        var target = -pic * imgWidth;        animate(ul, target);        //按钮也应该自动播放        //如果当前按钮的索引号square小于最后一个按钮的索引号olLis.length - 1 就++        if (square < olLis.length - 1) {            square++;        } else {            square = 0;        }        //干掉所有人        for (var i = 0; i < olLis.length; i++) {            olLis[i].className = "";        }        //留下我自己        olLis[square].className = "current";    }    //5.完善鼠标经过    function animate(obj, target) {        clearInterval(obj.timer);        obj.timer = setInterval(function () {            var step = 25;            //left值越小越靠左            //obj.offsetLeft小于target            //obj在target的左侧            //应该向右走            //向右走step是正            /*if (obj.offsetLeft < target) {             step = 9;             }             if (obj.offsetLeft > target) {             //向左走是负             step = -9;             }*/            var step = obj.offsetLeft < target ? step : -step;            //Math.abs(obj.offsetLeft - target) 这个表示对象到目标的距离            //如果对象到目标的距离比一步迈出的距离要大 我就要继续走            if (Math.abs(obj.offsetLeft - target) > Math.abs(step)) {                obj.style.left = obj.offsetLeft + step + "px";            } else {                //再迈一步就超过目标了                obj.style.left = target + "px";//手动把对象放置到目标上                clearInterval(obj.timer);//清理定时器            }        }, 15)    }</script>

0 0