一个网易云轮播图的实现

<!DOCTYPE html>
<html lang="chn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<style>/* 一些简单的初始化文件 */
* {margin: 0;padding: 0;
}
a {text-decoration: none;
}
li {list-style-type: none;
}
/* 更改图片的大小 */
img {width: 100%;border-radius: 20px;box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
}
/* 确定盒子的大小 */
.box {position: relative;width: 920px;height: 200px;/* 居中 */top: 0;left: 50%;transform: translate(-50%,50%);
}
.imgs {position: absolute;width: 680px;height: 284px;top: 0;left: 50%;transform: translate(-50%,0%);
}
/* 让图片都叠在一起 */
.imgs li {position: absolute;width: 680px;height: 360;transition: 0.5s;
}
.imgs img{position: absolute;width: 100%;height: 200px;
}
.imgs .innerImg{width: 200px;height: 100px;margin-left: 250px;margin-top: 50px;box-shadow: 2px 2px 5px rgb(204, 223, 31);
}
/* 给左右按钮设计样式，和定位 */
.box .left {position: absolute;font-size: 24px;color: white;width: 36px;height: 36px;line-height: 36px;text-align: center;background-color: black;border-radius: 18px;/* 添加半透明 */opacity: .3;top: 50%;left: 10px;z-index: 999;
}
.box .right {position: absolute;font-size: 24px;color: white;width: 36px;height: 36px;line-height: 36px;text-align: center;background-color: black;border-radius: 18px;/* 添加半透明 */opacity: .3;top: 50%;right: 10px;z-index: 999;
}
/* 给左右按钮添加鼠标移入样式 */
.left:hover {/* 把透明度挑高一点，让按钮看起来更亮一些 */opacity: .7;
}
.right:hover {opacity: .7;
}
/* 把图片错开 */
.imgs .one {transform: translateX(-150px) scale(0.9);z-index: 1;
}
/* 第二张图片在中间，层级最高 */
.imgs .two {z-index: 2;
}
.imgs .three {transform: translateX(150px) scale(0.9);z-index: 1;
}
/* 刚开始不显示的图片就放在中间图片的下面 */
.imgs .four {transform: scale(0.9);
}
.imgs .five {transform: scale(0.9);
}
.imgs .six {transform: scale(0.9);
}
.twoInnerWords{position: absolute;top: 130px;left: 50%;margin-left: -60px;font-size: 20px;color: black;
}
.imgInnerWords{position: absolute;width: 500px;height: 80px;margin-left: 90px;margin-top: 60px;padding-top: 10px;border: 2px solid #888;background-color: rgba(241, 218, 148, 0.315);color: black;
}
.topWords{line-height: 30px;width: 90px;margin-left: 200px;background-color: rgba(233, 226, 127, 0.575);text-align: center;
}
.bottomWords{line-height: 30px;margin: 5px 0 0 130px;
}
/* 设计小圆圈 */
/* 定位 */
.list {position: absolute;bottom: -25px;left: 50%;margin-left: -81px ;z-index: 777;
}
/* 设计样式 */
.list li {float: left;width: 15px;height: 15px;background-color: rgb(230, 230, 230);border-radius: 50%;margin: 0 6px;cursor: pointer;
}
/* 小圆圈改变后的样式 */
.list .change {background-color: rgb(236, 65, 65);
}
/* 左右两边各一个盒子 */
.rights{position: absolute;right: 0;bottom: 30px;height: 255.5px;width: 100px;
}
.lefts{position: absolute;left: 0;bottom: 14px;height: 255.5px;width: 100px;
}</style>
</head>
<body><!-- 大盒子 --><div class="box"><!-- 左侧按钮 --><a href="javascript:;" class="left">&lt</a><!-- 右侧按钮 --><a href="javascript:;" class="right">&gt</a><!-- 轮播图片 --><ul class="imgs" > <li class="one"><a href="#"><img src="../img/101.png"></a></li><li class="two"><a href="#" ><img src="../img/102.png"></a></li><li class="three"><a href="#"><img src="../img/104.png" alt=""></a></li><li class="four"><a href="#"><img src="../img/105.png"><div class="imgInnerWords"></a></li><li class="five"><a href="#"><img src="../img/103.png" alt=""></a></li><li class="six"><a href="#"><img src="../img/101.png" ><img src="./img/104.png" class="innerImg"></a></li></ul><ul class="list"></ul><div class="rights"></div><div class="lefts"></div></div><script>window.addEventListener('load',function(){//获取元素var leftb = document.querySelector('.left');var rightb = document.querySelector('.right');var box = document.querySelector('.box');var imgs = box.querySelector('.imgs');   var imgt = imgs.querySelectorAll('li');//自动翻页函数var timeone = setInterval(function(){rightf();},1000);//左右按钮的出现box.addEventListener('mouseover',function(){leftb.style.display = 'block';rightb.style.display = 'block';//移入时清除定时器clearInterval(timeone);timeone = null;       })//左右按钮的消失box.addEventListener('mouseout',function(){leftb.style.display = 'none';rightb.style.display = 'none';//恢复定时器clearInterval(timeone);timeone = setInterval(function(){rightf();},1000)})//动态生成小圆圈，小圈圈模块var list = box.querySelector('.list');for(var i = 0;i < imgs.children.length;i++){//创建li，加入ul中var li =document.createElement('li');list.appendChild(li);//给小圈圈添加类名li.setAttribute('index',i);//排他思想，实现点击小圆圈，变色li.addEventListener('click',colors);//经过小圆圈，切换图片li.addEventListener('mouseenter',jump);}//一开始第二个亮list.children[1].className = 'change';//变色函数 function colors(){//把所有的小圆圈变白for(var i = 0 ; i < list.children.length ; i++){list.children[i].className = '';}//给图片对应的小圆圈上色var index = this.getAttribute('index');list.children[index].className = 'change';} //跳转函数function jump(){var index = this.getAttribute('index');var now = num.indexOf('two');//计算经过点与当前点的距离var dif = Math.max(index,now) - Math.min(index,now);// console.log(dis);if(index > now){while(dif--){rightf();}}else {while(dif--){leftf();}}}//小圆圈跟随着图片移动var j = 1;function colort (){for(var i = 0 ; i < list.children.length ; i++){list.children[i].className = '';}if(j >= 6){j = 0;}else if (j < 0 ){j = 5;}list.children[j].className = 'change';}//翻页模块var num = ['one','two','three','four','five','six'];//右翻页rightb.addEventListener('click',rightf);function rightf(){//把数组的最后一个添加到第一个num.unshift(num[5]);//删除最后一个num.pop();//重新给li添加类名for(var i = 0;i < num.length;i++){imgt[i].setAttribute('class',num[i]);}//通过这个全局变量来让小圆圈的颜色一起变化j++;colort();}//左翻页leftb.addEventListener('click',leftf)function leftf(){num.push(num[0]);num.shift();for(var i = 0;i < num.length;i++){imgt[i].setAttribute('class',num[i]);}j--;colort();}//点击图片实现翻页,这里我是通过在左右两边添加一个盒子来实现的var rights = document.querySelector('.rights');rights.addEventListener('click',function(){rightf();})var lefts = document.querySelector('.lefts');lefts.addEventListener('click',function(){leftf();})
})</script>
</body>
</html>

使用JS+CSS的网易云轮播图的实现（完整代码）相关推荐

JS轮播图（网易云轮播图）
JS 轮播图写在前面最聪明的人是最不愿浪费时间的人.--但丁实现功能图片自动切换鼠标移入停止自动播放,显示按钮点击按钮,实现前后翻鼠标移入小圆圈,可以跳转到对应图片点击左右两侧图片部分 ...
使用HTML+CSS制作网易云轮播
使用HTML和CSS制作网易云轮播今天现来说说使用CSS的动画技术来实现轮播.现看看效果图这里是八张图片渐入渐出的效果轮播. html代码: <!DOCTYPE html&g ...
原生JS实现小米轮播图和网易云轮播图
文章目录小米轮播图网易云轮播图小米轮播图实现功能: 定时切换(2s) 点击按钮停止切换点击向左向右按钮进行相应切换鼠标点击下方的小圆点,并进行相应的切换效果: 代码如下: <!DO ...
原生H5实现网易云轮播图
许久不更新了,今天做一个网易云的轮播图,就像下面这样先二话不多说,贴上代码: <!DOCTYPE html> <html lang="en"> <h ...
记录下如何用vue实现PC端网易云轮播图效果
记录下自己写仿网易云音乐手写的轮播图,效果如图简单来说,这个轮播图原理是用css定位把所有图片叠再一起,显示前3张图片,第2张图片层里设置层级为最高,1,3俩张图片层级比2层级低,比其他图片高就行. ...
js + css 做出网易云音乐的轮播图
先说一下思路,网易云轮播图是这样的,每隔一段时间(这里运用到了js的定时器)右边的图片会放大(css的transform)并切换(定位的z-index)上来(这里还运用了过渡transition),最 ...
swiper怎么在HTML引入JS文件,Swiper.js插件超简单实现轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.超好用话不多说,直接上教程 1.首先加载插件,需要用到 ...
html js轮播图无白链接,JavaScript：100%原生js实现左右切换的轮播图(无延迟加载)...
简介这篇文章主要介绍了JavaScript:100%原生js实现左右切换的轮播图(无延迟加载)以及相关的经验技巧,文章约11114字,浏览量505,点赞数3,值得参考! *{ margin:0; pa ...
html5时间线图片自动轮播,js实现自动播放匀速轮播图
本文实例为大家分享了js实现自动播放匀速轮播图的具体代码,供大家参考,具体内容如下函数封装:( 匀速运动函数) function animate(obj,target,step,speed){ cl ...

使用JS+CSS的网易云轮播图的实现（完整代码）

一个网易云轮播图的实现

使用JS+CSS的网易云轮播图的实现（完整代码）相关推荐

最新文章

热门文章