首页
所有分类
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 相关文章推荐
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
解析原生JS getComputedStyle
May 25 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
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
SRF-S84(1) S2000(3) SRF-S83(1) PL660(1) 直流胆(1) 根德(2) 森海(1) MX500(1) 南麂列岛(1) 台湾(1)
You might like
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
PHP基本语法实例总结
2016/09/09 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
python中子类继承父类的__init__方法实例
2016/12/15 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
出纳的岗位职责
2013/11/09 职场文书
财务与信息服务专业推荐信
2013/11/28 职场文书
学校安全工作制度
2014/01/19 职场文书
顶撞领导检讨书
2014/01/29 职场文书
市场营销求职信范文
2014/02/21 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers