web技术

实现简单的轮播图(单张图片、多张图片)

2023-07-19 03:03 作者:Admin

前言

刚学js没多久,这篇博客就当做记录了,以后还会完善的,希望大佬们多多指点。ps:下面出现的都是直接闪动,没有滑动效果的轮播图。

单张图片的替换

原理

1.将几张图片叠在一起,通过改变"display:block"和"display:none"这两个属性实现替换。(前提:在css中给所有图片加上display:none属性)

2.不用将图片叠在一起,将一个div当做"窗口",通过"offset(height/top/width/left)"属性获取图片的(高/到顶部距离/宽/到左边距离/到右边距离),再通过事件更改相应的属性,让图片在"窗口"内整体移动。

样例一

//
window.onload = function () {
  //页面加载时启用函数
  Carouselfigure(); //函数名可任意
};
function Carouselfigure() {
  var next = document.getElementsByClassName("right")[0]; //点击切换下一张的按钮
  var prev = document.getElementsByClassName("left")[0]; //点击切换上一张的按钮
  var img = document
    .getElementsByClassName("innerbox")[0]
    .getElementsByTagName("img"); //获取图片数组
  var index = 0; //定义一个函数做工具人,“index”可改为任意名称
  img[0].style.display = "block"; //使页面加载后第一张图片显示
  next.onclick = function () {
    //绑定切换下一张图片的点击事件
    img[index].style.display = "none"; //隐藏当前图片
    if (index == 3) {
      //if语句使其循环
      index = 0;
    } else {
      index++; //通过index的切换实现图片的切换
    }
    img[index].style.display = "block"; //显示图片
  };
  prev.onclick = function () {
    //绑定切换上一张图片的点击事件
    img[index].style.display = "none"; //隐藏当前图片
    if (index == 0) {
      //if语句使其循环
      index = 3;
    } else {
      index--; //通过index的切换实现图片的切换
    }
    img[index].style.display = "block"; //显示图片
  };
}

样例二

//html
<body>
  <div class="button">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="allbox">
    <div class="outbox">
      <div class="innerbox">
        //用来移动的div
        <img src="1.jpg" />
        <img src="2.jpg" />
        <img src="3.jpg" />
        <img src="4.jpg" />
      </div>
    </div>
  </div>
</body>
//css
* {
	margin: 0;
	padding: 0;
}

.allbox {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 50px;
	height: 300px;
}

.outbox {
	position: relative;
	height: 300px;
	width: 25%;
	overflow: hidden;
	//使溢出div的图片隐藏
}

.innerbox {
	position: absolute;
	display: flex;
	//让图片横向排列
    width: 100%;
}

.innerbox img {
	width: 100%;
	height: 300px;
}

.button {
	position: relative;
	display: flex;
	justify-content: center;
}

.left {
	width: 50px;
	height: 50px;
	background-color: red;
	cursor: pointer;
}

.right {
	width: 50px;
	height: 50px;
	background-color: black;
	cursor: pointer;
}
//js
window.onload = function () {
  Carouselfigure();
};
function Carouselfigure() {
  var next = document.getElementsByClassName("right")[0];
  var prev = document.getElementsByClassName("left")[0];
  var innerbox = document.getElementsByClassName("innerbox")[0];
  var img = document
    .getElementsByClassName("innerbox")[0]
    .getElementsByTagName("img");
  var index = 0;
  function move() {
    //设置该函数为移动函数
    innerbox.style.left = -img[0].offsetWidth * index + "px";
    //offsetWidth用来获取图片的宽度,由于这几张图片的宽度相同,取任意一张的宽度都可,故选用数组中的0.负号是因为改变的是left的值,为了按图片顺序从左到右,才使用负号(可自行更换)。
  }
  next.onclick = function () {
    if (index == 3) {
      index = 0;
    } else {
      index++;
    }
    move(); //运行移动函数来实现效果
  };
  prev.onclick = function () {
    if (index == 0) {
      index = 3;
    } else {
      index--;
    }
    move(); //运行移动函数来实现效果
  };
}

多张图片的替换(一次动一张)

多张图片的替换其实和单张图片的原理二是一样的,只不过要稍稍做一点变化。↓

标签: #轮播图
推荐文章
HTML5 Canvas是一种强大的Web技术,它允许我们使用JavaScript在网页上创建和...
在这个程序中,我们将使用JavaScript创建一个可以在屏幕上放烟花的效果。我...
轮播图在网站中几乎无处不在,占用地方少,交互性好。今天就来聊聊如何用vu...
大部分网站或APP的首页差不多都运用到了轮播图,下边就探讨一下关于轮播图的...
轮播图实现思路:1、img_ul类里面存放img标签,将需要展示的图片依次排开,在...
推荐专题
如何自己建网站?建网站难不难?其实建网站说难不难,说容易也并不容易,难...
本专题精心收集整理了多种HTML+CSS+JS轮播图实现方案,带详细代码和讲解,正...