js之图片轮播简易

要想简单的实现图片的轮播,当点击  上一张按钮  跳转到上一张,点击   下一张按钮    跳转到下一张图片。

html和css代码:

<body>
    <div class="outer">
        <!-- 实现图片的轮播 
            并告诉用户现在是第几张图片
        -->
        <p></p>
        <img src="img/1.jpg">
        <button class="last">上一张</button>
        <button class="next">下一张</button>
    </div>


</body>
 <style>
        .outer {
            width: 900px;
            height: 400px;
            margin: 20px auto;
            text-align: center;
        }
    </style>

下面展示js的编写步骤

实现步骤:

1.首先需要获取上一张按钮与下一张按钮这个元素节点,并使用点击事件onclick去实现图片的轮播效果

 //获取上一张按钮

            var last = document.getElementsByClassName("last")[0];

            last.onclick = function() {

}

//    获取下一张按钮

            var next = document.getElementsByClassName("next")[0];

            next.onclick = function() {

}

2.分析如何将图片进行上下换转,我们需要获取图片img的文档节点,然后根据img将src进行变化,img的src变化则图片也变化,所以我们可以新建数组来存放图片的src.然后设置一个index作为操作数组的一个变量,这里我们设置index = 0;

 //获取当前img

            var img = document.getElementsByTagName("img")[0];

            //因为获取的img标签为数组,我们需要更改img中src的话,需要将每个图片中的src存为数组

            var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"];

            // 设置起始位置的index为0

            var index = 0;

3.现在我们来操作上一张按钮    和    下一张按钮

业务分析:

通过点击上一张按钮,图片跳转到上一张,说明图片的src改变,就说明我们使用了存放src的数组,并且当处于第一张图片的时候,当点击    上一张按钮   时,图片应该处于最后一张图片,所以我们可以使用一个if条件来判断当前的存放img中src的数组的位置。

点击     下一张按钮    类似。

 last.onclick = function() {

                    //点击上一张按钮,跳转到上一张

                    // alert("1");

                    index--;

                    if (index < 0) {

                        index = imgArr.length - 1;

                    }

                    img.src = imgArr[index];

                    

 

                }

}

//    获取下一张按钮

            var next = document.getElementsByClassName("next")[0];

            next.onclick = function() {

                // 点击下一张按钮,跳转到下一张

                // alert(2);

                index++;

                if (index > imgArr.length - 1) {

                    index = 0;

                }

                img.src = imgArr[index];

}

全部代码展示:


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <style>
        .outer {
            width: 900px;
            height: 400px;
            margin: 20px auto;
            text-align: center;
        }
    </style>
    <script>
        window.onload = function() {


            //获取当前img
            var img = document.getElementsByTagName("img")[0];
            //因为获取的img标签为数组,我们需要更改img中src的话,需要将每个图片中的src存为数组
            var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"];
            // 设置起始位置的index为0
            var index = 0;
            // 获取p标签
            var text = document.getElementsByTagName("p")[0];
            text.innerHTML = "总共" + imgArr.length + "张图片,现在为" + (index + 1) + "张";

            //获取上一张按钮
            var last = document.getElementsByClassName("last")[0];
            last.onclick = function() {
                    //点击上一张按钮,跳转到上一张
                    // alert("1");
                    index--;
                    if (index < 0) {
                        index = imgArr.length - 1;
                    }
                    img.src = imgArr[index];

                    text.innerHTML = "总共" + imgArr.length + "张图片,现在为" + (index + 1) + "张";




                }
                //    获取下一张按钮
            var next = document.getElementsByClassName("next")[0];
            next.onclick = function() {
                // 点击下一张按钮,跳转到下一张
                // alert(2);
                index++;
                if (index > imgArr.length - 1) {
                    index = 0;
                }

                img.src = imgArr[index];
                text.innerHTML = "总共" + imgArr.length + "张图片,现在为" + (index + 1) + "张";

            }



        };
    </script>


</head>

<body>
    <div class="outer">
        <!-- 实现图片的轮播 
            并告诉用户现在是第几张图片
        -->
        <p></p>
        <img src="img/1.jpg">
        <button class="last">上一张</button>
        <button class="next">下一张</button>
    </div>


</body>

</html>

 图片资源:如有侵权的话,请联系我删除哦

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 如何实现简易轮播图? 要实现简易轮播图,我们需要使用 HTML、CSS 和 JavaScript。 1. 首先,在 HTML 中创建轮播图的容器元素,如 <div class="swiper-container"></div>。 2. 在 CSS 中设置容器元素的宽度和高度,以及每个轮播项(即图片)的宽度和高度。 3. 在 JavaScript 中获取容器元素和所有轮播项的元素,并将它们保存为变量。 4. 在 JavaScript 中设置一个定时器,每隔一定时间就切换下一张轮播项的显示。 5. 切换轮播项时,需要动态修改容器元素的 left 值,以使下一张轮播项出现在视图中。 6. 在 JavaScript 中处理轮播项的无限循环,即最后一张轮播项切换到第一张轮播项时,容器元素的 left 值需要设置为 0。 7. 最后,可以添加一些 UI 控件,如向左和向右箭头,用于手动切换轮播项的显示。 通过以上步骤,我们可以实现一个简易的轮播图效果。 ### 回答2: 在Web开发中,轮播图是非常常见的一种交互效果。轮播图通常由多张图片、标题、文本等内容组成,并自动或手动地在页面上轮播展示。本文将介绍使用HTML、CSS和Javascript实现简易轮播图的方法。 首先,我们需要先设计页面布局和轮播图的样式。在HTML中,我们可以使用一个div元素作为轮播图的容器,并在其中创建多个子元素,每个子元素代表一张轮播图片。同时,在每个子元素上还可以添加标题、文本等元素。具体代码如下: ``` <div class="slider"> <div class="slider__item"> <img src="img1.jpg" alt="Slide 1"> <h3>Slide 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="slider__item"> <img src="img2.jpg" alt="Slide 2"> <h3>Slide 2</h3> <p>Nullam bibendum quam sed enim ultrices, ac pharetra tellus bibendum.</p> </div> <div class="slider__item"> <img src="img3.jpg" alt="Slide 3"> <h3>Slide 3</h3> <p>Etiam eget ligula in lectus varius porta quis sit amet quam.</p> </div> </div> ``` 在CSS中,我们可以设置轮播图容器的宽度、高度、背景色等属性,并将每个子元素设置为绝对定位,以实现叠加效果。具体样式代码如下: ``` .slider { width: 100%; height: 500px; position: relative; background-color: #f5f5f5; overflow: hidden; } .slider__item { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slider__item.active { opacity: 1; } ``` 在Javascript中,我们可以通过设置定时器来控制轮播图片的切换。具体做法是定义一个变量index表示当前展示的图片序号,在定时器中每隔一段时间将index自增1,并将当前图片的样式设置为.active。同时,如果index超过最大值,则将index重置为0,并从第一张图片重新开始轮播。具体Javascript代码如下: ``` let index = 0; const slides = document.querySelectorAll(".slider__item"); const maxIndex = slides.length - 1; setInterval(() => { slides[index].classList.remove("active"); index = (index === maxIndex) ? 0 : (index + 1); slides[index].classList.add("active"); }, 5000); ``` 通过以上步骤,我们就可以实现一个基础的轮播图效果了。当然,为了增强用户的体验,我们还可以添加其他交互效果,比如滑动、点击等。同时,我们也需要注意优化代码的性能和可读性,以便实现更复杂、完善的轮播图效果。 ### 回答3: 在网页设计中,轮播图被广泛应用,它可以用于展示多张图片或图片与文字的综合效果。本文将介绍如何使用HTML、CSS和JavaScript来实现简易轮播图。 首先,我们需要创建一个基本的HTML结构,包含一个div容器和多个图片元素。这些图片元素将被放置在div容器中,并且使用CSS调整它们的样式和位置。例如: ``` <div class="carousel"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> </div> ``` 接下来,我们使用CSS调整div容器和图片元素的样式,创建一个适合展示轮播图的视觉效果。根据需要,可以使用float、width、height、margin和padding等属性调整元素的位置和间距。例如: ``` .carousel { width: 600px; height: 400px; margin: 0 auto; overflow: hidden; position: relative; } .carousel img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } ``` 在这里,我们将div容器的宽度设置为600像素,高度设置为400像素。将margin设置为0 auto,使其水平居中。通过设置overflow为hidden,实现图片元素的裁剪。将图片元素的宽度和高度分别设置为100%,以填充整个div容器。使用position:absolute属性和top、left属性将图片堆叠在一起。 最后,我们使用JavaScript函数和事件来实现轮播图的自动切换。我们可以使用setInterval函数在一定的时间间隔之后轮流显示每个图片元素。例如: ``` let slideIndex = 0; setInterval(() => { let slides = document.querySelectorAll('.carousel img'); slides[slideIndex].style.display = "none"; slideIndex = (slideIndex + 1) % slides.length; slides[slideIndex].style.display = "block"; }, 2000); ``` 在这里,我们首先创建一个slideIndex变量,用于跟踪显示的图片索引。使用setInterval函数创建一个按照固定时间间隔循环运行的匿名函数,在匿名函数中使用querySelectorAll函数选择所有图片元素,并在slideIndex变量中更新索引值。接着,在当前图片上应用style.display = "none"将其隐藏,将下一张图片显示出来。 综上所述,HTML、CSS和JavaScript是实现简易轮播图的三个必要组成部分。通过结合这三种技术,我们可以轻松地创建出一个具有自动切换功能的轮播图。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值