JS实现网易云轮播效果图

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"><script src="41.js"></script>
</head><body><!-- 盒子里面方图片，可以通过左右按钮改变图片，同步的改变小圆圈的对应。不操作时会自动跳转图片--><!-- 1、添加图片 --><div class="nav"><div class="box"><div class="img"><a href="javascript:;" class="current"><img src="https://p1.music.126.net/j-TpUI1sHtMz0SRzu6L_Ig==/109951167232808852.jpg?imageView&quality=89" alt=""></a><a href="javascript:;"><img src=" https://p1.music.126.net/Q-GYxr6Opgmveo7cTulcOw==/109951167232940234.jpg?imageView&quality=89" alt=""></a><a href="javascript:;"> <img src="https://p1.music.126.net/9lvqxXnb-uXiGE0n4ChJiA==/109951167232823192.jpg?imageView&quality=89" alt=""></a><a href="javascript:;"> <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变为currentif (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链接吧）的数量来动态生成livar 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 flagvar 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变为currentif (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变为currentif (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) { //为了全局性，直接使用flagwindow.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 = flagfn(e)timer = setInterval(fun, [3000])})//根据flag的值去改变box的urlfunction 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)'}}}

JS实现网易云轮播效果图相关推荐

JS轮播图（网易云轮播图）
JS 轮播图写在前面最聪明的人是最不愿浪费时间的人.--但丁实现功能图片自动切换鼠标移入停止自动播放,显示按钮点击按钮,实现前后翻鼠标移入小圆圈,可以跳转到对应图片点击左右两侧图片部分 ...
原生JS实现小米轮播图和网易云轮播图
文章目录小米轮播图网易云轮播图小米轮播图实现功能: 定时切换(2s) 点击按钮停止切换点击向左向右按钮进行相应切换鼠标点击下方的小圆点,并进行相应的切换效果: 代码如下: <!DO ...
使用JS+CSS的网易云轮播图的实现（完整代码）
一个网易云轮播图的实现 <!DOCTYPE html> <html lang="chn"> <head><meta charset=&qu ...
使用HTML+CSS制作网易云轮播
使用HTML和CSS制作网易云轮播今天现来说说使用CSS的动画技术来实现轮播.现看看效果图这里是八张图片渐入渐出的效果轮播. html代码: <!DOCTYPE html&g ...
原生H5实现网易云轮播图
许久不更新了,今天做一个网易云的轮播图,就像下面这样先二话不多说,贴上代码: <!DOCTYPE html> <html lang="en"> <h ...
记录下如何用vue实现PC端网易云轮播图效果
记录下自己写仿网易云音乐手写的轮播图,效果如图简单来说,这个轮播图原理是用css定位把所有图片叠再一起,显示前3张图片,第2张图片层里设置层级为最高,1,3俩张图片层级比2层级低,比其他图片高就行. ...
基于css和js的轮播效果图实现
基于css和js的轮播效果图实现第一篇:效果图 1.先啥也不说直接上效果图第二篇:详细讲解 1. 建立容器 #box 给其设置相关属性(注意:overflow:hidden;) 2. Box ...
pc端html轮播带滑块,swiper.js简单快速实现轮播滑动（兼容PC端、移动端）
swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/) 效果演示: PC端移动端(在浏览器将设备切换为手机,这里 ...
html焦点图自动轮播,JS实现焦点图轮播效果的方法详解
本文实例讲述了JS实现焦点图轮播效果的方法.分享给大家供大家参考,具体如下: 效果图如下: 一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 ...

JS实现网易云轮播效果图

JS实现网易云轮播效果图相关推荐

最新文章

热门文章