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轮播的资料请关注我们其它相关文章！
相关推荐
-
JavaScript实现六种网页图片轮播效果详解
目录 1.当鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2.动态生成小圆圈 3.点击小圆圈,小圆圈变色 4.点击小圆圈滚动图片 5.点击右侧按钮一次,就让图片滚动一张. 6.点击右侧按钮, 小圆圈跟随变化 7.左侧按钮功能制作 8.自动播放功能 在网页中,我们经常会看到各种轮播图的效果,它们到底是怎样实现的呢?今天,我们就一起来看一下!首先,我们需要准备若干张图片,在这里我准备了五张图片. 功能需求: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 点击右侧按钮一次,图片往左播放
-
使用JavaScript实现轮播图效果
本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下 纯js,不使用轮播图控件怎么做轮播图呢,往下看吧 效果图: 1.可点击小圆点切换图片 2.可点击左右按钮切换图片 3.可自动播放 先上CSS和HTML代码: <body> <div class="main"> <div class="focus fl"> <a href="ja
-
JS实现轮播图小案例
本文实例为大家分享了JS实现轮播图小案例的具体代码,供大家参考,具体内容如下 分析: 点击左右箭头 滑动轮播图 鼠标不在轮播图内时 每隔2秒自动滑动轮播图 鼠标移入时 停止自动滑动轮播图 点击小圆圈 显示对应的轮播图 1.鼠标移入.移出显示或隐藏左右箭头: // 获取左右箭头的元素 let arrow_l = this.document.querySelector('.arrow-l'); let arrow_r = this.document.querySelector('.arrow-r')
-
JS实现轮播图案例
本文实例为大家分享了JS实现轮播图案例的具体代码,供大家参考,具体内容如下 实现功能: 1.自动轮播:鼠标停留在轮播图上时不切换图片,鼠标离开后自动轮播. 2.点击左右按钮切换图片. 3.点击下方按钮切换到对应的图片. 4.轮播图大小自适应: 可以放入到执行的父容器中展示. 不指定父容器时,默认放入body标签.占满一屏的宽度,当改变浏览器窗口大小时,轮播图大小成比例改变. 可以指定轮播图的宽高. 实现方式:用面向对象的方式实现,使用时传入图片和图片对应的数据,再创建实例. import Car
-
js制作轮播图效果
轮播图在前端开发中我认为是一个比较重要的点,因为包含了很多原生js知识点,以下是我学习制作轮播图的过程 难点: 1.如何让底下圆圈和图片所对应自动动态生成 2.如何让底下圆圈和图片所对应的起来 3.上一页和下一页所在盒子所移动的距离 4.图片切换时的渐出动画效果 5.节流阀的概念 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
-
js+css实现卡片轮播图效果
本文实例为大家分享了js+css实现卡片轮播图效果的具体代码,供大家参考,具体内容如下 实现点击的时候切换卡片,自动轮播,鼠标移入暂停,移出继续轮播,有动画事件效果就是这样 下面是代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
-
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都有相同的c
-
基于JavaScript实现仿京东图片轮播效果
js实现仿京东图片轮播效果,当鼠标划在窗口上面停止计时器,鼠标离开窗口,开启计时器,鼠标划在页签上面,停止计时器,手动切换,通过定义计时器封装函数run,封装函数changeOption,实现此效果,代码简单易懂,需要的小伙伴直接复制拷贝转走吧. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document<
-
基于JavaScript实现带缩略图的轮播效果
先瞄一眼js轮播效果图 代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{padding:0;margin:0;} #content {width:400px;height:500px;margin:10px auto;position:relative;border:1px
-
Javascript实现图片轮播效果(一)让图片跳动起来
图片轮播效果,在各大网站的首页都能看到,比较常见.下面小编给大家分享这一效果的简单实现. 1.图片跳动起来 2.图片序列控制的实现 3.前后按钮控制的实现 这篇文章来看图片按照间隔时间进行切换. 我们先把结构代码完成,这个我就不做详细的讲解了.先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
-
javascript实现图片轮播效果
本文实例介绍了javascript实现图片轮播效果的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0
-
JavaScript实现标题栏文字轮播效果代码
本文实例讲述了JavaScript实现标题栏文字轮播效果代码.分享给大家供大家参考,具体如下: 这里演示的JS文字轮播,显示在标题栏区域,以前个人主页时候经常见到的效果,不过现在都规范了,标题栏一般都不加入这种效果了.但是可以学习一下JS制作实现一些文字特效,运行效果后请查看标题栏. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-title-loop-show-style-demo/ 具体代码如下: <html> <head>
-
JavaScript实现大图轮播效果
本文实例为大家分享了js图片轮播效果的具体代码,供大家参考,具体内容如下 <head> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>大图轮播</title> <style type="text/css"> * { margin: 0px; padding
-
Javascript实现图片轮播效果(二)图片序列节点的控制实现
推荐阅读:Jquery代码实现图片轮播效果(一) 在上篇文章给大家介绍了Javascript实现图片轮播效果(一)让图片跳动起来,这里我们实现图片序列节点的跳转实现.在图片跳转的同时,我们一般需要知道他跳转的是哪个位置,这里就是图片序列节点需要跟图片一同显示.下面我们就直接作分析. 在没讲正文之前先给大家展示效果图: 在HTML,CSS代码结构中我们需要加入一个图片序列是否选中的样式 #slider ol li a.active{ background-color: #ffffff; color
-
原生javascript实现图片轮播效果代码
看到BlueDream在他博客上写的javascript仿QQ滑动菜单的效果,代码实在是优雅,相比较差别一下就凸显了,下次再把他代码的精髓偷过来,嘿嘿. [原理简述] html和css跟JQuery实现图片轮播效果里面的一样,略去.主要是几个公共函数,渐显和渐失,用闭包实现.至于主体逻辑部分,非常一般. [程序源码] 贴几个公共函数算了,fadeIn,渐显,fadeOut,渐失 复制代码 代码如下: function id(name) {return document.getElementByI