首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript模拟实现网易云轮播效果

Posted in Javascript onApril 04, 2022

1、div宽度直接与浏览器界面宽度一致：width:100%

2、怎么让图片在一个绝对定位的盒子中垂直居中显示？

继续加绝对定位。然后改变top，和left的值

3、采用外置的js文件，需要等到页面加载完毕：window.οnlοad=function(){}

4、添加和移除元素的类名：先获取DOM对象，然后通过classList.add('current')（里面不需要加.）和classList.remove()即可添加类型和删除类名。

5、事件委托： 比如有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件。这样会增加dom的交互次数 事件委托是利用事件的冒泡原理实现，事件从最深的节点开始，然后逐步向上传播事件。页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div。当给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

6、js改变元素背景图url：document.getElementById("元素id").style.backgroundImage="url(图片路径)";

7、js实现定时器的暂停与开启：

var dsq = setInterval(gd,40)；oDiv.οnmοuseοver= function()    //停止定时器实现暂停的效果
{   clearInterval(dsq);   } oDiv.οnmοuseοut= function()      //开启定时器，实现重启的效果
{    //setInterval(gd,40);  错误的示范\当多次点击的时候，因为开辟了很多个定时器，效果就是一直跳动，看起来很像是因为没有加节流阀的效果。   dsq=setInterval(gd,40);    
//需要再开启这个定时器，一定要在定时器前面加上你定义的那个定时器的变量名，如果不加的话就会又开启一个新的定时器然后你上面的那个停止dsq定时器的函数是无法停止这个新的定时器的，当你鼠标不断移入移出都会开启一个新的定时器，多个定时器同时执行相同的动作，这样相当于你的定时器里面的时间成倍的减少，效果就是你的定时器越来越快的执行，  
}

JavaScript模拟实现网易云轮播效果

<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>
    <link rel="stylesheet" href="41.css" rel="external nofollow" >
    <script src="41.js"></script>
</head>
 
<body>
    <!-- 盒子里面方图片，可以通过左右按钮改变图片，同步的改变小圆圈的对应。不操作时会自动跳转图片-->
    <!-- 1、添加图片 -->
    <div class="nav">
        <div class="box">
            <div class="img">
                <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="current"><img src="https://p1.music.126.net/j-TpUI1sHtMz0SRzu6L_Ig==/109951167232808852.jpg?imageView&quality=89" alt=""></a>
                <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src=" https://p1.music.126.net/Q-GYxr6Opgmveo7cTulcOw==/109951167232940234.jpg?imageView&quality=89" alt=""></a>
                <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" > <img src="https://p1.music.126.net/9lvqxXnb-uXiGE0n4ChJiA==/109951167232823192.jpg?imageView&quality=89" alt=""></a>
                <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" > <img src="https://p1.music.126.net/GnAlY92neUdHWfAGwWz_cQ==/109951167232850389.jpg?imageView&quality=89" alt=""></a>
            </div>
 
            <!-- 2、添加左右箭头 -->
            <div class="right"><img src="right.png" alt=""></div>
            <div class="left"><img src="left.png" alt=""></div>
            <!-- 3、添加下面的小圆圈 -->
            <ul>
 
            </ul>
 
        </div>
 
    </div>
 
 
 
</body>
 
</html>
* {
    margin: 0px;
    padding: 0px;
}
 
.box {
    position: relative;
    width: 1200px;
    height: 500px;
    margin: auto;
}
 
.img {
    width: 1200px;
    height: 500px;
    margin: auto;
    overflow: hidden;
}
 
img {
    width: 100%;
    height: 100%
}
 
.nav {
    width: 100%;
    height: 500px;
    margin-top: 20px;
    /* 这个url地址需要根据img图片的显示来改变的 */
    background-image: url(https://p1.music.126.net/j-TpUI1sHtMz0SRzu6L_Ig==/109951167232808852.jpg?imageView&blur=40x20);
    background-repeat: no-repeat;
    background-size: 100%;
}
 
.right,
.left {
    width: 80px;
    height: 120px;
    position: absolute;
    top: 210px;
    right: -80px;
}
 
.left {
    left: -80px;
}
 
.right img,
.left img {
    position: absolute;
    top: 25px;
    left: 15px;
    width: 50px;
    height: 70px;
}
 
.left:hover,
.right:hover {
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}
 
ul {
    width: 600px;
    height: 100px;
    position: absolute;
    bottom: -20px;
    left: 340px;
}
 
ul li {
    float: left;
    margin-left: 100px;
    list-style: disc;
    color: rgb(239, 232, 232);
    font-size: 50px;
}
 
ul .there {
    z-index: 2;
    color: rgb(237, 8, 8);
}
 
ul li:hover {
    color: red
}
 
a {
    width: 1200px;
    height: 500px;
    display: none;
}
 
.current {
    display: block;
}
window.onload = function() {
    //定时器,自动改变图片以及背景图以及小圆圈
    var timer = window.setInterval(fun, [3000])
 
    function fun() {
        for (i = 0; i < as.length; i++) {
 
            if (as[i].getAttribute('class') == 'current') {
                flag = i
            }
        }
        //如果flag=as.length-1；那么就让flag=0的a的类变为current，如果flag<as.length-1,那么就让flag+1的a的class变为current
        if (flag == as.length - 1) {
            //排他思想
            for (i = 0; i < as.length; i++) {
                as[i].classList.remove('current')
                lis[i].classList.remove('there')
            }
            as[0].classList.add('current')
            lis[0].classList.add('there')
            e = 0
        }
        if (flag < as.length - 1) {
            for (i = 0; i < as.length; i++) {
                as[i].classList.remove('current')
                lis[i].classList.remove('there')
            }
            as[flag + 1].classList.add('current')
            lis[flag + 1].classList.add('there')
            e = flag + 1
        }
        fn(e)
    }
    timer = setInterval(fun, [3000])
        //点击的时候需要先把定时器关闭
        // 应该时根据img图片(直接根据a链接吧）的数量来动态生成li
    var as = document.querySelectorAll('a')
    var ul = document.querySelector('ul')
    var nav = document.querySelector('.nav')
    for (i = 0; i < as.length; i++) {
        // 创建元素
        var li = document.createElement('li')
        ul.appendChild(li)
            //添加元素
    }
    //给按钮添加点击事件
    var flag
    var left = document.querySelector('.left')
    var right = document.querySelector('.right')
    var lis = document.querySelectorAll('li')
    lis[0].classList.add('there')
    console.log(lis);
    left.addEventListener('click', function() {
            window.clearInterval(timer)
                //左边按钮按下一次，图片往左边变化一张,相当于要获得当前显示的a是第几个
                //对所有的as进行遍历，看那个a的class类为current，然后获得这个编号
                //i不能用来索引
                //还要让对应的li添加there这个类名
            for (i = 0; i < as.length; i++) {
                if (as[i].getAttribute('class') == 'current') {
                    flag = i
                }
            }
            //如果flag=0；那么就让flag=as.length的a的类变为current，如果flag>0,那么就让flag-1的a的class变为current
            if (flag == 0) {
                //排他思想
                for (i = 0; i < as.length; i++) {
                    as[i].classList.remove('current')
                    lis[i].classList.remove('there')
                }
                as[as.length - 1].classList.add('current')
                lis[as.length - 1].classList.add('there')
                e = as.length - 1
            }
            if (flag > 0) {
                for (i = 0; i < as.length; i++) {
                    as[i].classList.remove('current')
                    lis[i].classList.remove('there')
                }
                as[flag - 1].classList.add('current')
                lis[flag - 1].classList.add('there')
                e = flag - 1
            }
            fn(e)
            timer = setInterval(fun, [3000])
        })
        //类似的添加右边按钮的点击事件
    right.addEventListener('click', function() {
            window.clearInterval(timer)
                //左边按钮按下一次，图片往右边变化一张,相当于要获得当前显示的a是第几个
                //对所有的as进行遍历，看那个a的class类为current，然后获得这个编号
                //i不能用来索引
                //还要让对应的li添加there这个类名
            for (i = 0; i < as.length; i++) {
                if (as[i].getAttribute('class') == 'current') {
                    flag = i
                }
            }
            //如果flag=as.length-1；那么就让flag=0的a的类变为current，如果flag<as.length-1,那么就让flag+1的a的class变为current
            if (flag == as.length - 1) {
                //排他思想
                for (i = 0; i < as.length; i++) {
                    as[i].classList.remove('current')
                    lis[i].classList.remove('there')
                }
                as[0].classList.add('current')
                lis[0].classList.add('there')
                e = 0
            }
            if (flag < as.length - 1) {
                for (i = 0; i < as.length; i++) {
                    as[i].classList.remove('current')
                    lis[i].classList.remove('there')
                }
                as[flag + 1].classList.add('current')
                lis[flag + 1].classList.add('there')
                e = flag + 1
            }
            fn(e)
            timer = setInterval(fun, [3000])
        })
        //现在再给下面的小圆圈添加点击事件
        //当按下小圆圈的时候获得this,那么要获得是第几个小圆圈产生事件，需要自定义属性一个编号。然后用这个编号去设置as[]的类
        //自定义属性
    for (i = 0; i < lis.length; i++) {
        lis[i].setAttribute('index', i)
    }
    //添加事件,因为要给每个小圆圈添加点击事件，不如直接使用事件委托，将事件监听器设置再ul上面，利用冒泡原理委托到li上
    ul.addEventListener('click', function(e) { //为了全局性，直接使用flag
            window.clearInterval(timer)
            flag = (e.target.getAttribute('index'));
            if (flag) {
                for (i = 0; i < as.length; i++) {
                    as[i].classList.remove('current')
                    lis[i].classList.remove('there')
                }
                as[flag].classList.add('current')
                lis[flag].classList.add('there')
            }
            e = flag
            fn(e)
            timer = setInterval(fun, [3000])
        })
        //根据flag的值去改变box的url
    function fn(e) {
        if (e == 0) {
            nav.style.backgroundImage = 'url(https://p1.music.126.net/j-TpUI1sHtMz0SRzu6L_Ig==/109951167232808852.jpg?imageView&blur=40x20)'
        }
        if (e == 1) {
            nav.style.backgroundImage = 'url(https://p1.music.126.net/Q-GYxr6Opgmveo7cTulcOw==/109951167232940234.jpg?imageView&blur=40x20)'
        }
        if (e == 2) {
            nav.style.backgroundImage = 'url(https://p1.music.126.net/9lvqxXnb-uXiGE0n4ChJiA==/109951167232823192.jpg?imageView&blur=40x20)'
        }
        if (e == 3) {
            nav.style.backgroundImage = 'url(https://p1.music.126.net/GnAlY92neUdHWfAGwWz_cQ==/109951167232850389.jpg?imageView&blur=40x20)'
        }
    }
}

以上就是JavaScript模拟实现网易云轮播效果的详细内容，更多关于JavaScript轮播的资料请关注三水点靠木其它相关文章！

JavaScript模拟实现网易云轮播效果

- Author -

一夕ξ

- Original Sources -

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
javascript的对话框详解与参数
Mar 08 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
JS实现点击掉落特效
Jan 29 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
vue中div禁止点击事件的实现
Apr 02 #Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 #Vue.js
Vue+TypeScript中处理computed方式
Apr 02 #Vue.js
Vue+Flask实现图片传输功能
Apr 01 #Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 #Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 #Vue.js
字段分割(1) REGEXP(1) queue(1) TaiShan(1) 内存池(1) RecyclerView(1) Hadoop(1) Simhash(1) 九宫格(5) 控制流(1)
You might like
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
php 邮件发送问题解决
2014/03/22 PHP
PHP创建XML接口示例
2019/07/04 PHP
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
分分钟玩转Vue.js组件（二）
2017/03/01 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
Python解析json文件相关知识学习
2016/03/01 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
美国最受欢迎的度假租赁网站：VRBO
2016/08/02 全球购物
机械系大学毕业生推荐信
2013/11/27 职场文书
售房协议书
2014/08/19 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
元旦晚会开场白
2015/05/29 职场文书
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python
Python正则表达式中flags参数的实例详解
2022/04/01 Python
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js