您的位置:首页 > 教程 > 服务端类 > Golang > JavaScript模拟实现网易云轮播效果

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

2022-04-04 13:02:03 来源:易采站长站 作者:

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

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定时器的函数是无法停止这个新的定时器的,当你鼠标不断移入移出都会开启一个新的定时器,多个定时器同时执行相同的动作,这样相当于你的定时器里面的时间成倍的减少,效果就是你的定时器越来越快的执行,  
}

<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轮播的资料请关注易采站长站其它相关文章!

如有侵权,请联系QQ:279390809 电话:15144810328

相关文章

  • golang用什么开发工具?

    golang用什么开发工具?

    golang用的开发工具有:1、Go Revive,是一个Go语言的代码质量检测工具;2、Go Callvis,可以用来可视化Go程序的调用图;3、Gaia,高效,快速,轻量级,并且对开发人员友好。golang用的开发工具有:1、Go Reviverevive 是一个 Go 语言的代码质量检测工具(Linter for Go),具有快速、可配置、可扩展、灵活和美观等特性,可作为 golint 的替
    2020-08-07
  • golang是多线程模式吗?

    golang是多线程模式吗?

    golang是多线程模式的,golang的线程模型是M P G模型,整体上Go程与内核线程是多对多对应的,因此首先来讲就一定是多线程的。golang是多线程模式。 由于gmp中的p与m是将p绑定与m内核线程上,而后p的最大数量有GOPROCESS确定,而M内核线程的数量会由go去限制为10K个,但是由于内核原因做不到这么多,所以这个限制就当做没有吧。拿个图明确一下Golang有些所谓的M比N模型,
    2020-08-07
  • golang用什么开发工具?

    golang用什么开发工具?

    golang用的开发工具有:1、Go Revive,是一个Go语言的代码质量检测工具;2、Go Callvis,可以用来可视化Go程序的调用图;3、Gaia,高效,快速,轻量级,并且对开发人员友好。golang用的开发工具有:1、Go Reviverevive 是一个 Go 语言的代码质量检测工具(Linter for Go),具有快速、可配置、可扩展、灵活和美观等特性,可作为 golint 的替
    2020-08-07
  • golang是单进程的吗?

    golang是单进程的吗?

    golang不是单进程的,而是多线程;golang的线程模型是M P G模型,整体上Go程与内核线程是多对多对应的,因此首先来讲就一定是多线程的。golang不是单进程的,而是多线程。Golang有些所谓的M比N模型,M个线程下可以创建N个go routine,一般而言N远大于M,本质上属于多线程模型,但是协程的调度由Go的runtime决定,强调开发者应该使用channel进行协程之间的同步。至
    2020-08-07
  • 代码详解使用Go基于WebSocket构建视频直播弹幕系统

    代码详解使用Go基于WebSocket构建视频直播弹幕系统

    (1)业务复杂度介绍开门见山,假设一个直播间同时500W人在线,那么1秒钟1000条弹幕,那么弹幕系统的推送频率就是: 500W * 1000条/秒=50亿条/秒 ,想想B站2019跨年晚会那次弹幕系统得是多么的NB,况且一个大型网站不可能只有一个直播间!使用Go做WebSocket开发无非就是三种情况:使用Go原生自带的库,也就是 golang.org/x/net ,但是这个官方库真是出了奇Bu
    2020-08-07
  • PHP语法和Go语法有什么差异?对比介绍

    PHP语法和Go语法有什么差异?对比介绍

    本篇文章给大家对比一下PHP语法和Go语法,带大家了解一下PHP语法和Go语法之间的差异。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。Go 是由 Google 设计的一门静态类型的编译型语言。它有点类似于 C,但是它包含了更多的优点,比如垃圾回收、内存安全、结构类型和并发性。它的并发机制使多核和网络机器能够发挥最大的作用。这是 GoLang 的最佳卖点之一。此外,Go 速度快,
    2020-08-07
  • golang需要什么基础?

    golang需要什么基础?

    golang需要什么基础?golang需要的基础是:Go语言语法特别简单简洁,有C的底子更好,差一些也没关系。前提是你要真心想学,才有足够的动力去学。1、初学Go语言首先弄懂基础语法和概念:基本数据类型、Struct、Array、map、Slice、指针、接口、map、内置函数,常用工具包等,还有接口和Slice的底层数据结构。这些不需要弄特别懂,能自己理解并自己描述我觉得就可以了,关键在实践和应
    2020-08-07
  • golang为什么那么火?

    golang为什么那么火?

    golang为什么那么火?golang那么火的原因:1, Concurrency的原生支持通过语言原生的Goroutine和Channel,很好的支持了Concurrency。你可以把Goroutine理解为非常轻量级的Thread。一个Goroutine只占用2KB的内存,但是一个Thread要占用1MB的内存。Goroutine的创建、销毁和切换的开销,相对于线程来说特别低。你可以随时起上千个
    2020-08-07