无缝轮播图

最新推荐文章于 2024-09-21 15:07:21 发布
最新推荐文章于 2024-09-21 15:07:21 发布
阅读量184 收藏
点赞数
分类专栏： 小练习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/neverGV/article/details/117432064
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <div class="carousel">
            <div class="slide" id="slide">
                <img src="1.jpeg" style="width: 100%;height:250px" alt="">
                <img src="2.jpeg" style="width: 100%;height:250px" alt="">
                <img src="3.jpeg" style="width: 100%;height:250px" alt="">
            </div>
            <div class="caditor" style="z-index: 999;">
                <li class="li-active"></li>
                <li></li>
                <li></li>
            </div>
            <div class="btn-group">
                <button class="left" ><</button>
                <button class="right" >></button>
            </div>
        </div>
    </div>
    <script>
        window.onload=()=>{
            const timerInter = 4000;
            let currentIndex = 1
            var timer = null;
            let slide = document.querySelector('.slide');
            let firstelement = slide.firstElementChild.cloneNode(true);
            let lastelement = slide.lastElementChild.cloneNode(true);
            let Nodelength = slide.children.length+2;
            let caditor = document.querySelector('.caditor')
            let caditorList = caditor.children;
            var width = window.innerWidth
            var leftbtn=document.querySelector('.left')
            var rightbtn=document.querySelector('.right')
            slide.appendChild(firstelement)
            slide.insertBefore(lastelement,slide.firstChild)
            slide.style.left = `-${width}px`
            slide.style.transition = 'left 1.5s';
            for(let i=0;i<caditorList.length;i++)
            {
                caditorList[i].onclick=function caditorclick()
                {
                    if(i==currentIndex-1)return;
                    clearInterval(timer)
                    currentIndex=i+1;
                    playindicator(currentIndex-1)
                    play(currentIndex)
                    let timeout = setTimeout(()=>{
                        return autoplay()
                    },0)
                }
            }
            autoplay()
            leftbtn.onclick=()=>{
                btnclick('left')
            }
            rightbtn.onclick=()=>{
                btnclick('right')
            }
            function btnclick(e)
            {
                clearInterval(timer);
                if(e=='left')
                {
                    currentIndex--
                    play(currentIndex);
                    if(currentIndex>=1)
                    {
                        playindicator(currentIndex-1)
                        clearInterval(timer)
                        autoplay()
                    }
                    if(currentIndex==0)
                    {
                        currentIndex=Nodelength-2;
                        playindicator(currentIndex-1)
                        rightbtn.disabled=true;
                        leftbtn.disabled=true;
                        setTimeout(() => {
                            rightbtn.disabled=false;
                            leftbtn.disabled=false;
                            slide.style.left = `-${width*(currentIndex)}px`
                            slide.style.transition = 'left 0s';
                            autoplay()
                        }, timerInter);
                    }
                    // if(currentIndex>=1)
                    // {
                    //     playindicator(currentIndex-1)
                    //    return setTimeout(() => {
                    //         return autoplay()
                    //     }, timerInter);
                    // }
                    // if(currentIndex==0)
                    // {
                    //     leftbtn.disabled=true;
                    //     rightbtn.disabled=true;
                    //     currentIndex=3;
                    //     caditor.style.zIndex=0;
                    //     playindicator(currentIndex-1)
                    //     setTimeout(()=>{
                    //         caditor.style.zIndex=999;
                    //         leftbtn.disabled=false;
                    //         rightbtn.disabled=false;
                    //         slide.style.left = `-${width*(currentIndex)}px`
                    //         slide.style.transition = 'left 0s';
                    //         return autoplay()
                    //     },timerInter)
                    // }
                    // 上一页
                }else
                {
                    // 下一页
                    currentIndex++;
                    play(currentIndex);
                    if(currentIndex<=3)
                    {
                        playindicator(currentIndex-1)
                        clearInterval(timer)
                        autoplay()
                    }
                    if(currentIndex==Nodelength-1)
                    {
                        rightbtn.disabled=true;
                        leftbtn.disabled=true;
                        currentIndex=1;
                        playindicator(currentIndex-1)
                        setTimeout(() => {
                            slide.style.left = `-${width*(currentIndex)}px`
                            slide.style.transition = 'left 0s';
                            rightbtn.disabled=false;
                            caditor.style.zIndex=999;
                            leftbtn.disabled=false;
                            autoplay()
                        }, timerInter);
                    }
                    // if(currentIndex<=3)
                    // {
                    //     playindicator(currentIndex-1)
                    //     setTimeout(() => {
                    //         return autoplay()
                    //     }, timerInter);
                    // }
                    // if(currentIndex==Nodelength-1)
                    // {
                    //     rightbtn.disabled=true;
                    //     leftbtn.disabled=true;
                    //     currentIndex=1;
                    //     caditor.style.zIndex=0;
                    //     playindicator(currentIndex-1)
                    //     let timeout = setTimeout(()=>{
                    //         rightbtn.disabled=false;
                    //         caditor.style.zIndex=999;
                    //         leftbtn.disabled=false;
                    //         slide.style.left = `-${width*(currentIndex)}px`
                    //         slide.style.transition = 'left 0s';
                    //          autoplay()
                    //     },timerInter)
                    // }
                }
            }
            function autoplay()
            {
                timer = setInterval(() => {
                    currentIndex++;
                    if(currentIndex<Nodelength)
                    {
                        play(currentIndex);
                        if(currentIndex<Nodelength-1)
                        {
                            playindicator(currentIndex-1)
                        }else if(currentIndex>currentIndex-2)
                        {
                            playindicator(0)
                        }
                        if(currentIndex==Nodelength-1)
                        {
                            caditor.style.zIndex=0;
                            rightbtn.disabled=true;
                            leftbtn.disabled=true;
                            setTimeout(() => {
                                clearInterval(timer)
                                caditor.style.zIndex=999;
                                rightbtn.disabled=false;
                                leftbtn.disabled=false;
                                slide.style.left = `-${width}px`
                                slide.style.transition = 'left 0s';
                                currentIndex = 1;
                                playindicator(currentIndex-1)
                                return autoplay()
                            }, timerInter);
                        }
                    }
                }, timerInter);
            }
            function play(index) {
                slide.style.left = `-${width*index}px`
                slide.style.transition = 'left 1.5s';
            }
            function playindicator(index) {
                for(let i=0; i<caditorList.length;i++)
                {
                    caditorList[i].classList.remove('li-active')
                }
                caditorList[index].classList.add('li-active')
              }
        }
        
    </script>
</body>
<style>
    html,body{
        width:100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .carousel
    {
        position: relative;
        width: 100%;
        height: 250px;
    }
    .box{
        width: 100%;
        background-color: #ccc;
        height: 250px;
        overflow: hidden;
    }
    .slide{
        width: 100%;
        height: 250px;
        display: flex;
        position: absolute;
    }
    .slide img{
        flex-shrink: 0;
        width: 100%;
        height: 250px;
    }
    .caditor{
        position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .li-active{
        background-color: red;
        width: 50px;
        height: 10px;
        margin: 0 10px;
    }
    li{
        list-style: none;
        width: 50px;
        height: 10px;
        background-color: #ccc;
        margin: 0 10px;
        cursor: pointer;
    }
    .btn-group
    {
        position: relative;
        width: 100%;
        height: 250px;
    }
    .left{
        position: absolute;
        left: 10px;
        top: 50%;
        cursor: pointer;
        font-size:40px
    }
    .right{
        position: absolute;
        cursor: pointer;
        right: 10px;
        top: 50%;
        font-size:40px
    }
</style>
</html>

 

neverGV
关注
专栏目录
JS实现无缝轮播图
qq_45000910的博客
06-01 1138
js无缝轮播图的实现
js实现无缝轮播图
weixin_45571121的博客
09-11 4215
一、轮播图需求 需要实现每隔一定时间进行下一张图片的自动轮播 需要点击左右按钮可以进行上下图片的切换 显示当前位置的小圆点 点击小圆点可以切换到对应的图片上 鼠标移入可视区时，停止轮播，显示左右按钮 下面我们来看一下效果图： 二、轮播图的原理 图片移动实现原理：利用浮动将所有所有照片依次排成一行，给这一长串图片ul添加一个父级的遮罩（就是可视区），每次只显示一张图，其余的都隐藏起来。对图片添加绝对定位，通过控制left属性，实现照片的移动。 图片移动动画原理：从当前图片移动到下一张...
轮播图的案例
hangnan315的博客
05-18 438
轮播图 轮播图的基本构成以及js的步骤分解 把html与css写出来 点击右箭头，切换到下一张图片。 点击左箭头，切换到上一张图片。 无缝轮播：克隆第一张图片到最后去，当图片播放到最后一张时，如果点击右箭头，瞬间回到第一张，然后从第一张再开始轮播。 小圆点：点击右箭头，小圆点应该跟着变化。第n张图片显示时，第n个小圆点应该有一个active类名。 排他思想：先将其他的active都清除掉，再给自身添加active类名。 小圆点的点击事件：点击第n个小圆点，应该显示第n个图片。 自动播放 定时器，每隔一段
原生的js轮播图
weixin_30664051的博客
12-16 83
图片会照常循环播放，当然也可以通过按钮来进行切换，当切出当前的页面时，等到你在回到当前页面时该轮播的图片还是停留在你之前所切出去的的那张图片的状态。 HTML部分： <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" ...
Vue 项目实战4-无缝轮播图
最新发布
2301_81807150的博客
09-21 1126
这些知识点共同作用，使得轮播图组件能够响应用户操作，动态加载和切换图片。
原生JS实现无缝轮播图（完整代码）
weixin_51831991的博客
04-08 1246
轮播图的种类，代码的风格和实现方法有很多种，同样的轮播图结构功能不同的人写的代码都各式各样的，只要掌握了方法就按照自己的思路代码习惯来实现，本案例仅供参考交流。
轮播图 （无缝轮播图）
m0_46088512的博客
09-17 3357
1.无缝轮播核心:在最后多加一张第一张图,当达到最后一张t1的时候一瞬间将ul拉回到0的位置 结构： <div class="wrap"> <ul> <li><img src="./image/t1.png" alt=""></li> <li><img src="./image/t2.png" alt=""></li> ...
JQ CSS3 自制可控多图无缝轮播图，无缝轮播图，可自定义显示图片张数的无缝轮播图，多图显示轮播图
huang_rui_min的博客
06-05 527
废话不多说先上效果使用例子1效果当然调整num属性的值可以相应同屏显示 不同图片数量属性功能介绍html结构css核心JQ代码。
JavaScript实现无缝轮播图效果
qq_56648619的博客
03-31 5923
通过原生js实现无缝轮播效果。 思路： 1.利用html+css完成轮播图片，按钮，底部小点的整体效果的布局。 2.通过原生js完成图片轮播，无缝自动切换，底部小点随图片切换而切换。 步骤1： 建立无缝轮播的HTML的基本布局 html部分： <div id="slider"> <!-- 图片部分 --> <ul class="slider-list"> <!-- <li><a
html 无缝轮播图完整代码
热门推荐
qq_44552416的博客
08-19 1万+
【代码】html 无缝轮播图完整代码。
原生js实现无缝轮播图
10-15
【原生JS实现无缝轮播图】是一种常见的网页动态效果，用于展示一组连续的图片或内容，给用户带来流畅的视觉体验。本文将详细介绍如何利用JavaScript实现这一功能，并提供具体的代码示例。 首先，理解无缝轮播图的...
carousel无缝轮播图.zip
09-16
"carousel无缝轮播图.zip" 是一个包含实现无缝轮播图的资源包，主要由CSS样式文件（index.css）、HTML结构文件（index.html）和JavaScript脚本文件（index1.js）组成，还有可能用于展示的图片文件夹（img）。...
jQuery无缝轮播图
05-07
**jQuery无缝轮播图**是一种常见的网页动态效果，它允许用户在多个图像或内容之间进行平滑切换，形成一种连续不间断的浏览体验。在网页设计中，轮播图常用于展示产品图片、新闻亮点或者广告等内容，有效地利用有限的...
jQuery无缝轮播图代码
10-20
无缝轮播图意味着在图片切换的过程中没有明显的切换痕迹，用户看不出轮播的开始和结束，给人以流畅的视觉体验。无缝轮播图的实现关键在于处理好图片数组的复制、首尾衔接以及动画效果。 从给定的文件信息中，我们...
原生JS实现无缝轮播图片
11-20
总的来说，原生JS实现的无缝轮播图通过JavaScript动画、事件监听和DOM操作实现了图片的自动切换和用户交互。这种技术在现代网页设计中广泛应用，提供了良好的用户体验。理解并掌握这一技术对于前端开发者来说非常...
关于tinymce富文本编辑器实现双向绑定的方法
neverGV的博客
06-19 2405
我在做后台管理系统的时候有个模块需要使用tinymce富文本编辑器去数据初始化，但是会遇到dom没有渲染的报undefined和get,set的问题，我也试过在watch方法里面去监听
Vue关于组件路由守卫无法获取this
neverGV的博客
06-17 2288
今天在写一个组件时候用到了组件路由守卫，但是在赋值时无法将路由中query的值绑定到组件的this中，这是因为 const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 }, beforeRouteUpdate (to, from, next) {
el-date-picker赋值后组件未渲染时间
neverGV的博客
06-16 450
<el-date-picker v-model="timerange" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" @change="handletimer" > </el-date-picker> <script> export default{ data() { return {..
关于二次开发vue-element-admin上传到git上再次克隆到本地后依赖安装失败的原因
neverGV的博客
06-28 338
因为网络原因git上tui-editor无法响应导致依赖安装失败，需要先在package.json中删除掉该依赖，再执行npm i 命令，依赖安装后再单独安装tui-editor插件即可
js无缝轮播图无缝轮播图
04-29
JS无缝轮播图是一种常见的网页轮播图展示效果，它能够自动循环播放多张图片，同时具有无缝切换的特性，用户可以通过点击左右箭头或者触摸屏幕来进行切换。实现JS无缝轮播图的方法比较多，其中比较常用的方式是使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值