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 相关文章推荐
jQuery异步获取json数据方法汇总
Dec 22 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 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
You might like
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
在Python中使用判断语句和循环的教程
2015/04/25 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
介绍一下游标
2012/01/10 面试题
什么是事务?为什么需要事务?
2012/01/09 面试题
食品销售计划书
2014/04/26 职场文书
产品生产计划书
2014/05/07 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
同乡会致辞
2015/07/30 职场文书