原生js自动播放轮播

最新推荐文章于 2024-04-15 10:28:24 发布
最新推荐文章于 2024-04-15 10:28:24 发布
阅读量521 收藏 2
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36587340/article/details/82464049
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 800px;
            height: 360px;
            margin: 100px auto;
            border: 1px solid #EEE;
            position: relative;  
        }
        .box ul li{
            width:100%;
            height: 360px;
            list-style: none;
            position: absolute;
            top: 0;
            font-size: 50px;
            text-align: center;
            line-height: 360px;
            /*//display: none;*/
            opacity: 0;
        }
        .box ul li:nth-child(1){
            background-color: red;
        }
        .box ul li:nth-child(2){
            background-color: yellow;
        }
        .box ul li:nth-child(3){
            background-color: pink;
        }
        .box ul li:nth-child(4){
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box" id='box'>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>
</html>
<script>
    var oBox = document.getElementById("box"),
        oUl = oBox.getElementsByTagName('ul')[0],
        oLi = oUl.getElementsByTagName('li'),
        index = 0;

        oLi[0].style.opacity = '1';

        function autoPlay(){
            index++;
            if(index >= oLi.length){
                index = 0;
            };
            chengLi(index)
        }

        function chengLi(cur){
            for(var i = 0; i < oLi.length; i++){
                oLi[i].style.opacity = '0';
            }
            // alert(cur)
            oLi[cur].style.opacity = '1';
            index = cur;
        }
        setInterval(autoPlay, 500);
</script>

 

qq_36587340
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js --自动播放音频
weixin_30443075的博客
09-02 5011
简介 基本使用 chrome下无法自动播放问题处理 简介 音频的播放使用audio进行操作，可以有两种方式处理（纯js和html标签+js）。 audio是html5的新标签，用于定义声音 audio的属性（引用w3school） 属性值描述 autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。 ...
自动轮播图的实现
m0_46655386的博客
12-04 1342
js自动轮播图
js实现轮播图自动轮播
weixin_47619284的博客
08-16 9663
js实现轮播图自动轮播
用四种方法实现轮播图
最新发布
qq_43757976的博客
04-15 6201
（自己的理解，设置大div和小div 的position,来让div浮起来，脱离文档流，就像云一样，可以飘了~）（与js用的方法一样，只是语法不同而已，与上面的js方法对比着看，很好理解哒~ 用完jQuery， 发现相比于js来说好方便呀~ ，记得用的时候要加上 引用jQuery，否则没有效果的~ ）先将所有图片，点点的样式设置为一样的，再对当前索引对应的图片，点点设置特别的样式。判断点击的是哪个点点，然后将它的索引值赋值给index，再通过调用change1()函数，来实现它的改变。
videoautoplay:视频自动播放解决方案
03-10
视频自动播放的限制与解决方案 IOS微信 安卓微信 IOS携程 安卓携程 PC端 是否支持 支持（有声音） 不支持 支持（无声音） 支持（无声音） 支持（无声音） 解决方案 自动播放 默认不播放，用户点击页面任何地方后播放 默认静音自动播放，用户点击页面后有声继续播放 默认静音自动播放，用户点击页面后有声继续播放 默认静音自动播放，用户点击页面后有声继续播放 使用方法 方法1：直接调用 videoautoplay.js ♡并调用 <!--./js/main.js替换为--> < video id =" videoFrame " src =" https://video.c-ctrip.com/videos/AS0u1q000001hy4e47F27.mp4 " controls playsinline > </ video > < script src =" ./js/videoautop
javascript轮播图超详细
周百万的博客
07-06 1万+
鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止 鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始 动态创建下面的小圆点 无缝滚动效果 点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片 使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况...
原生js实现3D轮播图
12-13
3D轮播图是我做过复杂的图片轮播了，由于是利用坐标，层级之间的关系，所以实现起来原理比较简单但是bug巨多，在推推拖拖了好久后，下定决心重新整理成博客，与大家分享！ 首先分析一下3D图片轮播的功能需求： 和...
原生js实现点击轮播和自动轮播代码
05-30
利用javasScript实现图片轮播，具有1.自动播放（鼠标进入显示区域时停止播放） 2.左右焦点切换 3.底下小按钮切换 等功能
原生JS实现的自动轮播图功能详解
12-29
本文实例讲述了原生JS实现的自动轮播图功能。分享给大家供大家参考，具体如下： 轮播图的用处 轮播图是现在网站网页上最常见的效果之一，很多网站上都会用到，淘宝京东等等。有些自动选项卡也是需要用到的，而且它的...
原生js实现无缝轮播图
10-15
【原生JS实现无缝轮播图】是一种常见的网页动态效果，用于展示一组连续的图片或内容，给用户带来流畅的视觉体验。本文将详细介绍如何利用JavaScript实现这一功能，并提供具体的代码示例。 首先，理解无缝轮播图的...
原生js实现无缝轮播图效果
10-20
最后，我们可能还需要添加自动轮播功能，可以使用`setTimeout`或`requestAnimationFrame`实现定时切换。同时，为了防止用户在自动轮播过程中点击按钮导致混乱，我们需要在点击事件中清除定时器，并在动画结束后重新...
JS简单实现仿网页图片轮播
10-30
本资源是利用JS简单的仿照网站上常见的广告轮播实现图片的自动切换，来回切换，下标切换等。
如何使用JavaScript实现无缝滚动自动播放轮播图效果
10-14
主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
video下autoplay属性无效——添加muted属性
热门推荐
小乖的专栏
05-10 8万+
背景：video下载入ogg格式视频，并设置自动播放属性autoplay，但是使用Chrome预览时，视屏画面已加载出来，但是无法自动播放，F5刷新后可以自动播放。使用火狐浏览器可以自动播放。最初代码如下：&lt;video autoplay="autoplay" loop="loop" class="aaa" &gt; &lt;source src="./video/exa.ogg" t...
简易实现无缝切换自动轮播
神膘护体小月半的博客
06-12 746
JS+CSS 实现无缝切换自动轮播图
原生js实现轮播图
weixin_70245286的博客
08-05 426
原生js如何实现轮播图
【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解 自动播放+手动播放
2401_84091243的博客
04-08 801
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**[外链图片转存中…(img-1dn13Oug-1712560281045)][外链图片转存中…(img-EJot8hfC-1712560281046)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
html+css+jquery实现轮播图自动切换、左右切换、点击切换
打代码是一天，不打代码也是一天
02-20 3121
代码如下： 效果如下图： 需要引入jquery； 定时器实现4s自动切换轮播图 步骤3：左右切换，左右点击事件手动切换 实现代码如下： 到目前存在自动切换轮播图，也存在手动切换轮播图。就可能存在手动切换时，又自动切换，客户体验就不太好，可以优化成，手动切换轮播图时，自动切换轮播图关掉，手动切换完成后，又开启自动切换轮播图。优化后，自动切换和左右切换js代码如下： 步骤4：点击切换，点击圆点事件手动切换 代码如下： html+css+jquery实现轮播图自动切换、左右切换、点击切换，代码如下：
原生js实现自动轮播图
03-24
可以使用 setInterval 和 clearInterval 函数实现自动轮播图。具体的实现代码如下： ``` let sliderIndex = 0; let sliderIntervalId = null; const sliders = document.querySelectorAll('.slider-item'); ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值