JS循环轮播图

最新推荐文章于 2024-09-29 14:00:00 发布
最新推荐文章于 2024-09-29 14:00:00 发布
阅读量443 收藏 1
点赞数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1022数组</title>
    <style>
        #container{
            position: relative;
            height: 400px;
            width: 1240px;
            margin: 50px auto;
        }
        .img{
            position: absolute;
            width: 450px;
            height: 300px;
            top: 50px;
            left: 395px;
            bottom: 0;
            z-index: 0;
            background-color: #404040;
            font-size: 48px;
            color: #fff;
            transition: all 0.8s ease-out;
        }
        .img:nth-of-type(1){
            width: 450px;
            height: 300px;
            top: 50px;
            left: 0;
            z-index: 1;
            opacity: 0.8;
        }
        .img:nth-of-type(2){
            width: 525px;
            height: 350px;
            top: 25px;
            left: 140px;
            z-index: 2;
            opacity: 0.9;
        }
        .img:nth-of-type(3){
            width: 600px;
            height: 400px;
            top: 0;
            left: 320px;
            z-index: 3;
            opacity: 1;
        }
        .img:nth-of-type(4){
            width: 525px;
            height: 350px;
            top: 25px;
            left: 575px;
            z-index: 2;
            opacity: 0.9;

        }
        .img:nth-of-type(5){
            width: 450px;
            height: 300px;
            top: 50px;
            left: 790px;
            z-index: 1;
            opacity: 0.8;
        }
    </style>
</head>
<body>
<div id="container">
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
    <img src="" alt="" class="img">
</div>

</body>
<script>
    var imgs = document.getElementsByClassName("img");
    var container = document.getElementById("container");
    var imgSrc = [" http://cdn.attach.qdfuns.com/notes/pics/201710/26/120712ngt2edra2crr7dgd.jpg", " http://cdn.attach.qdfuns.com/notes/pics/201710/26/120652w2q5xqqr8lt9ry7r.jpg", " http://cdn.attach.qdfuns.com/notes/pics/201710/26/120714s2o8oolp628lhnhb.jpg", " http://cdn.attach.qdfuns.com/notes/pics/201710/26/120553pqqp08q6pkkqpq8o.jpg", " http://cdn.attach.qdfuns.com/notes/pics/201710/26/120641af8ja5noa88joc8n.jpg", " http://cdn.attach.qdfuns.com/notes/pics/201710/26/120644mwoeh09r9rzwxzn8.jpg", " http://cdn.attach.qdfuns.com/notes/pics/201710/26/120725h4jskiflsivw15k1.jpg", " http://cdn.attach.qdfuns.com/notes/pics/201710/26/120635qga4ljgurljnzrvj.jpg", " http://cdn.attach.qdfuns.com/notes/pics/201710/26/120728nn78gfnyinf2gf7i.jpg", " http://cdn.attach.qdfuns.com/notes/pics/201710/26/120632lpjom8ppsl26dd68.jpg"];
    var numA = 2;
    var numB = 0;


    for (var i = 0; i < imgs.length; i ++) {
        imgs[i].src = imgSrc[i];
        imgs[i].index = i;//给每张图片添加一个序号，通过这个序号来计算套用哪个样式
    }


    for ( var  k = 0; k < imgs.length; k ++) {
        imgs[k].onclick = function () {

            //通过激活序号(numA)和当前按钮序号(numB)的差算出新的序号,用for来更新一遍
            numB = this.index;
            for (var i = 0; i < imgs.length; i ++) {
                if (imgs[i].index + numA - numB >= 0) {
                    imgs[i].index = (imgs[i].index + numA - numB) % imgs.length;
                } else if (imgs[i].index + numA - numB < 0) {
                    imgs[i].index = imgs[i].index + numA - numB + imgs.length;
                }

                //根据序号刷新样式
                if (imgs[i].index === 0) {
                    imgs[i].style.width = 450 + "px";
                    imgs[i].style.height = 300 + "px";
                    imgs[i].style.zIndex = 1;
                    imgs[i].style.top = 50 + "px";
                    imgs[i].style.left = 0 + "px";
                    imgs[i].style.opacity = 0.5
                } else if (imgs[i].index === 1) {
                    imgs[i].style.width = 525 + "px";
                    imgs[i].style.height = 350 + "px";
                    imgs[i].style.zIndex = 2;
                    imgs[i].style.top = 25 + "px";
                    imgs[i].style.left = 140 + "px";
                    imgs[i].style.opacity = 0.8
                } else if (imgs[i].index === 2) {
                    imgs[i].style.width = 600 + "px";
                    imgs[i].style.height = 400 + "px";
                    imgs[i].style.top = 0 + "px";
                    imgs[i].style.zIndex = 3;
                    imgs[i].style.left = 320 + "px";
                    imgs[i].style.opacity = 1
                } else if (imgs[i].index === 3) {
                    imgs[i].style.width = 525 + "px";
                    imgs[i].style.height = 350 + "px";
                    imgs[i].style.zIndex = 2;
                    imgs[i].style.top = 25 + "px";
                    imgs[i].style.left = 575 + "px";
                    imgs[i].style.opacity = 0.8
                } else if (imgs[i].index === 4) {
                    imgs[i].style.width = 450 + "px";
                    imgs[i].style.height = 300 + "px";
                    imgs[i].style.zIndex = 1;
                    imgs[i].style.top = 50 + "px";
                    imgs[i].style.left = 790 + "px";
                    imgs[i].style.opacity = 0.5
                } else {
                    imgs[i].style.width = 450 + "px";
                    imgs[i].style.height = 300 + "px";
                    imgs[i].style.zIndex = 0;
                    imgs[i].style.top = 50 + "px";
                    imgs[i].style.left = 395 + "px";
                    imgs[i].style.opacity = 0
                }
            }
        };

    }

    //定时器部分
    function play() {
        //自动播放相当于点击序号2的图片
        for (var j = 0; j < imgs.length; j ++) {
            if (imgs[j].index === 1) {
                imgs[j].onclick();
                break  //这个break不能省,不然会有bug
            }
        }
    }
    var imgPlay = window.setInterval(play,2000);
    container.onmouseover = function () {
        window.clearInterval(imgPlay);
    };
    container.onmouseout = function () {
        imgPlay = window.setInterval(play,2000);
    };





</script>
</html>

资料进群领取598399936
 
22guanerye123
关注
js实现图片无缝循环轮播
10-16
JavaScript 实现图片无缝循环轮播是一种常见的网页动态效果，它为用户提供了一种优雅的方式来展示一组图片，让图片在用户眼前连续、平滑地切换。在本文中，我们将深入探讨如何利用 JavaScript 实现这一功能。 首先...
JS实现轮播图的三种简单方法。
热门推荐
m0_67392409的博客
03-11 1万+
Js实现轮播图01 实现思路 这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下： 实现效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图实现01</title> &
js实现无缝无限循环轮播图片
幼儿园老大的博客
06-18 5660
如果有问题或者更好的方法，欢迎留言 效果图如下： 具体代码见下面： <!DOCTYPE> <html> <head> <title>06</title> <meta charset="utf-8"> <script> window.onload = function () { var ul = ...
什么是轮播图？如何实现轮播图？有几种方法
最新发布
QQ1257871322的博客
09-29 501
手动实现：适合学习和灵活定制。使用库：快速实现，易于维护。CSS动画：不依赖JavaScript，适合简单场景。根据具体需求和复杂程度，可以选择适合的方法来实现轮播图。
js轮播（三种方式）
多喝热水早点休息的博客
04-18 5415
方式一 1.先将图片信息封装成一个数组的全局变量。 2.创建一个全局变量 i 用于操作数组的下标。 3.点击上、下一个按钮时，触发函数，使 i 自增或自减 4.通过字符串拼接的方式，拼接 url。 js代码： <script type="text/javascript"> //images 用于存储图片信息。可通过下标获取 var images = [ "01.webp", "02.webp", "03.jpg", "04.webp", ]; var i = 0;//用
css+js制作循环轮播图——可滑动
学习使我快乐_玉祥
03-25 2815
先上效果图： （1）自动切换 （2）手动拖拽 HTML <div id="adbox" class="adbar"> <img src="img/back6.jpg"> <img src="img/back1.jpg"> <img src="img/back2.jpg"> <img src="img/back3.jpg"> <img
JS轮播图详解
weixin_75154342的博客
09-17 3961
JS轮播图的实现核心是使用JavaScript来控制图片的切换和显示，配合HTML和CSS完成布局和样式设置。通过定时器实现图片的自动切换，并通过事件监听器实现对鼠标事件的响应。CSS样式：通过CSS样式对容器和列表进行布局和样式设置，例如设置容器的宽度、高度、背景色等，并设置列表项的宽度和高度，以及布局方式，使图片水平排列在一行。调整功能和样式：根据需求，可以进一步调整轮播图的功能和样式，例如添加左右切换按钮、指示器、淡入淡出效果等。HTML结构：首先，在HTML中创建一个包含轮播图的容器，通常使用。
原生js实现无限循环轮播图效果
11-28
无限循环轮播图的核心在于模拟一种无边界的效果，使得用户无法察觉到图片是从第一张切换到最后一张或是从最后一张切换到第一张。这通常通过计算图片的偏移量来实现。例如，当图片滑动到最右边时，将偏移量设置为第...
javascript图片切换综合实例（循环切换、顺序切换）
10-22
## JavaScript图片切换综合实例知识点 ### 标题和描述知识点 - **图片切换**：指在网页上实现图片自动或手动切换显示的效果。这通常用于产品展示、广告轮播等功能。 - **循环切换**：一种图片切换模式，其中图片...
js两张图片并列循环滚动图片特效
06-09
本项目名为“js两张图片并列循环滚动图片特效”，它提供了将两张（或更多）图片并列展示，并通过点击实现循环滚动的JavaScript解决方案。这种效果常用于产品展示、轮播广告等场景，使得页面更具视觉吸引力。 首先，...
js实现无缝轮播图
weixin_45571121的博客
09-11 4234
一、轮播图需求 需要实现每隔一定时间进行下一张图片的自动轮播 需要点击左右按钮可以进行上下图片的切换 显示当前位置的小圆点 点击小圆点可以切换到对应的图片上 鼠标移入可视区时，停止轮播，显示左右按钮 下面我们来看一下效果图： 二、轮播图的原理 图片移动实现原理：利用浮动将所有所有照片依次排成一行，给这一长串图片ul添加一个父级的遮罩（就是可视区），每次只显示一张图，其余的都隐藏起来。对图片添加绝对定位，通过控制left属性，实现照片的移动。 图片移动动画原理：从当前图片移动到下一张...
原生js实现轮播图及无缝滚动
m0_64642443的博客
09-01 2821
原生js实现轮播图及无缝滚动
JS轮播图的n种方法
Benxiaohai_311的博客
03-22 1万+
第一种 轮播图, 没有耳朵, 自动轮播, 鼠标放上去会停止, 只需在body里面更改图片宽高和图片路径 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一种轮播图，没有耳朵，自动轮播，鼠标放上去会停止，只需在body里面更改图片宽高和图片路径</title> <style> *.
原生Js实现自动无缝轮播图
cty13697011482的博客
06-16 2102
javascript实现自动无缝轮播图 1、实现原理 轮播图实现原理是用一个大盒子组容器，里面包含一个小盒子，小盒子用来移动，小盒子里装着要轮播的图片，图片水平排放，当小盒子移动的时候带动图片一起移动，要想实现无缝轮播，则要在最后放一张与第一张一摸一样的图片，当图片滚动到最后一张时，用户会感觉这是第一张，然后再跳到第一张，这样用户就不会感觉图片是跳过去的，实现无缝轮播 2、实现效果 （图片上传有大小限制，这里就展示一部分。。。） 3、代码展示 3.1 网页结构布局（html代码） <!DOCTYPE
js写轮播图，效果为每秒图片左移，循环
zhangcham的博客
02-02 564
html写六张图片及序号按钮 <div class='subbanner' id ='subbanner'> <div class='sub_banner_box'> <ul class='sub_banner_boxItem clearfix'> <li> ...
使用JavaScript实现轮播图功能（超详细）
rr20060119的博客
03-29 2356
通过自动或手动切换，轮播图能够有效地吸引用户的注意力，并展示重要的信息。在本篇博客中，我们将详细介绍如何使用原生JavaScript来实现一个简单的轮播图功能。切换图片：编写一个函数来切换图片，通过改变轮播图容器的transform属性来实现。首先，我们创建一个简单的HTML结构，其中包含轮播图的容器、图片和控制按钮。现在，我们使用JavaScript来实现轮播图的功能。设置状态：为轮播图设置一个当前索引状态，用于跟踪当前显示的图片。HTML结构：创建一个包含图片和轮播图控制按钮的HTML结构。
js案例：简单的图片轮播（代码逐行讲解，建议先看完整代码）
qq_52799985的博客
08-09 1万+
做一个简单的js图片轮播效果并不需要特别多的知识点，代码逐行讲解，小白必看。
JavaScript之手把手教你做轮播图
跳探戈的小龙虾的博客
04-08 1万+
我教你做的轮播图包括但不限于以下功能： 平滑滚动、定时滚动 + 点击滚动、防鼠标连续点击、第一张图与最后一张图无缝处理 如果你是在找轮播图怎么做的小白，那么恭喜你，找到我这儿，不用再换了，认认真真看完这篇文章，我保证你能做一个完整的轮播图。 而且我会以面向小白的简单通俗讲解，带大家做完轮播图，保证全程没有盲点。 不过前提是，有简单的jQuery基础和会用setTimeout()和setInterval()函数，这两个要求可以在我的其他博客里学习到。
简易循环轮播图
qq_43228610的博客
08-24 146
简易轮播图，可以实现循环往一个方向无限滚动。添加有滚动动画，让滚动更加滑溜溜。
使用JavaScript打造循环轮播图
“JavaScript实现循环轮播图” 在网页设计中，循环轮播图是一种常见的功能，用于展示一组图片或内容并自动循环播放。本实例将详细介绍如何使用JavaScript来实现这一功能。轮播图通常包括自动切换、点击导航按钮切换...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值