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

前言

刚学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();//运行移动函数来实现效果
    }
}

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

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

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

你可能感兴趣的:(实现简单的轮播图(单张图片、多张图片))