轮播图的基本原理

最新推荐文章于 2024-07-11 15:57:48 发布

董无敌啊

最新推荐文章于 2024-07-11 15:57:48 发布

阅读量5.7k

点赞数 1

分类专栏： javascript 文章标签：图片轮播图

本文链接：https://blog.csdn.net/github_37744981/article/details/62894595

版权

本文详细介绍了实现轮播图效果的五个步骤，包括动态生成和插入元素，鼠标经过按钮时的样式改变，计算图片盒子移动距离，通过点击箭头切换图片，以及按钮状态的同步变化。同时，还讲解了如何添加自动滚动功能，使得轮播图能自动播放下一张图片。

摘要由CSDN通过智能技术生成

通过以下的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;
        }