JavaScript怎么实现网易云轮播效果
短信预约 -IT技能 免费直播动态提醒
这篇文章主要介绍“JavaScript怎么实现网易云轮播效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript怎么实现网易云轮播效果”文章能帮助大家解决问题。
div宽度直接与浏览器界面宽度一致：width:100%
怎么让图片在一个绝对定位的盒子中垂直居中显示？
继续加绝对定位。然后改变top，和left的值
采用外置的js文件，需要等到页面加载完毕：window.οnlοad=function(){}
添加和移除元素的类名：先获取DOM对象，然后通过classList.add('current')（里面不需要加.）和classList.remove()即可添加类型和删除类名。
事件委托： 比如有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件。这样会增加dom的交互次数 事件委托是利用事件的冒泡原理实现，事件从最深的节点开始，然后逐步向上传播事件。页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div。当给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。
js改变元素背景图url：document.getElementById("元素id").style.backgroundImage="url(图片路径)";
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 class="lazy" data-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 class="lazy" data-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 class="lazy" data-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 class="lazy" data-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 class="lazy" data-src="https://p1.music.126.net/GnAlY92neUdHWfAGwWz_cQ==/109951167232850389.jpg?imageView&quality=89" alt=""></a> </div> <!-- 2、添加左右箭头 --> <div class="right"><img class="lazy" data-src="right.png" alt=""></div> <div class="left"><img class="lazy" data-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; 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怎么实现网易云轮播效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
