原生JS实现小米轮播图和网易云轮播图

文章目录

小米轮播图
网易云轮播图

小米轮播图

实现功能：

定时切换（2s）
点击按钮停止切换
点击向左向右按钮进行相应切换
鼠标点击下方的小圆点，并进行相应的切换

效果：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>小米轮播图</title><style>*{margin:0;padding: 0;}.box{width: 1200px;height: 470px;margin: 100px auto;position: relative;}.box div{width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0;transition: opacity 2s;}.box div img{width: 1200px;height: 470px;}.item{width: 250px;position: absolute;left: 50%;top:90%;transform:translateX(-50%);}.item li{list-style: none;width: 12px;height: 12px;border-radius: 50%;border: 1px solid #fff;float: left;margin-left: 30px;display: block;cursor: pointer;}.show{background: #ccc;}.box span{width: 40px;height: 80px;position: absolute;top:50%;font-size: 20px;text-align: center;line-height: 80px;color: #ccc;background: #333;opacity: .2;cursor: pointer;transform: translateY(-50%)}.left{left: 0;}.right{right:0;}</style>
</head>
<body><div class="box"><div style="opacity: 1"><img src="./images/01.jpg" alt=""></div><div><img src="./images/02.jpg" alt=""></div><div><img src="./images/03.jpg" alt=""></div><div><img src="./images/04.jpg" alt=""></div><div><img src="./images/05.jpg" alt=""></div><ul class="item"><li class="show"></li><li></li><li></li><li></li><li></li></ul><span class="left">&lt;</span><span class="right">&gt;</span></div>
</body>
<script>class Banner{constructor(){this.box=document.querySelector(".box");this.divs=document.querySelectorAll(".box div");this.item=document.querySelector(".item");this.lis =document.querySelectorAll("li");this.left=document.querySelector(".left");this.right=document.querySelector(".right");this.time=null;this.index=0;// 自动切换this.automatic();// 添加事件this.addEvent();}automatic(){var that =this;this.time=setInterval(function(){that.index++;if(that.index>that.divs.length-1){that.index=0}for(var i=0;i<that.divs.length;i++){that.divs[i].style.opacity=0;that.lis[i].className="";}that.divs[that.index].style.opacity=1;that.lis[that.index].className="show"},2000)}addEvent(){var that =this;// 添加左按钮事件this.left.onclick=function(){that.leftclick();}// 添加右按钮事件this.right.onclick=function(){that.rightclick()}// 添加小圆点事件this.item.onclick=function(){that.itemclick()}}leftclick(){// console.log(1)// 点击之后先清除计时器clearInterval(this.time);this.index--;if(this.index <0){this.index = this.divs.length-1;}this.clickmove();}rightclick(){clearInterval(this.time);this.index++;if(this.index>this.divs.length-1){this.index=0}this.clickmove();}clickmove(){console.log(this.index)for(var i=0;i<this.divs.length;i++){this.divs[i].style.opacity=0;this.lis[i].className="";}this.divs[this.index].style.opacity=1;this.lis[this.index].className="show";// 点击事件后再开启自动播放this.automatic();}itemclick(){// 给每个小圆点添加一个内置属性for(var i =0;i<this.lis.length;i++){this.lis[i].setAttribute("x",i);}var that =this;// 事件委托this.item.onclick=function(eve){var e = eve || window.event;var target = e.target || e.srcElement;if(target.nodeName == "LI"){console.log(target)clearInterval(that.time);for(var i=0;i<that.lis.length;i++){that.divs[i].style.opacity=0;that.lis[i].className="";}that.divs[target.getAttribute("x")].style.opacity=1;that.lis[target.getAttribute("x")].className="show";that.index=target.getAttribute("x");that.automatic();}}}}new Banner();
</script>
</html>

网易云轮播图

实现功能

定时切换（3s）
鼠标放上去停止切换
点击左右图片进行图片切换
鼠标放上去显示向左向右按钮，鼠标移下来再次隐藏
点击向左向右按钮进行相应切换
鼠标放到下方的线上，停止定时切换，并进行相应的切换
鼠标离开下方的线，重新开始定时切换
效果图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>网页云轮播图</title><style>* {margin: 0;padding: 0;}.carousel {width: 1200px;margin: 100px auto;}ul {list-style-type: none;position: relative;display: flex;min-height: 300px;margin-bottom: 40px;}.prev,.next {cursor: pointer;display: none;position: absolute;top: 44%;z-index: 1;}.prev {left: 0;}.next {right: 0}ul li {width: 700px;height: 300px;position: absolute;left: 250px;right: 250px;transition: all .3s ease-out;opacity: 0;}li img {width: 100%;height: 100%;}.now {z-index: 1;opacity: 1;transform: scale3d(1.0, 1.2, 1.2)}.before {transform: translateX(-250px);opacity: .8;}.after {transform: translateX(250px);opacity: .8;}.lines {display: flex;justify-content: center;}.line {width: 20px;height: 4px;background-color: black;margin: 10px 10px;}.active-line{background-color: red;}</style>
</head>
<body><div class="carousel"><ul><span class="iconfont prev">&lt;</span><span class="iconfont next">&gt;</span><li class="now"><img src="./images/1.jpg" alt=""></li><li class="after"><img src="./images/2.jpg" alt=""></li><li><img src="./images/3.jpg" alt=""></li><li><img src="./images/4.jpg" alt=""></li><li><img src="./images/5.jpg" alt=""></li><li class="before"><img src="./images/6.jpg" alt=""></li></ul><div class="lines"><div class="active-line line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
</body>
<script>
function nextPic () {var picArr = document.querySelectorAll('ul li'),len = picArr.length,i = 0;for (;i < len;i++) {if (picArr[i].className == 'after') {picArr[(i + 1) % len].className = 'after';picArr[i].className = 'now';if (i - 1 < 0) {picArr[len - 1].className = 'before';}else {picArr[i - 1].className = 'before';}//把原来的before删除(原来的now、after都被覆盖掉了)if (i == 0) {picArr[len - 2].className = '';}else if (i == 1) {picArr[len - 1].className = '';}else {picArr[i - 2].className = '';}break;}}
}
function prevPic () {var picArr = document.querySelectorAll('ul li'),len = picArr.length,i = 0;for (;i < len;i++) {if (picArr[i].className == 'before') {if (i - 1 < 0) {picArr[len - 1].className = 'before';}else {picArr[i - 1].className = 'before';}picArr[i].className = 'now';picArr[(i + 1) % len].className = 'after';//删除之前的afterpicArr[(i + 2)% len].className = '';break;}}
}
function nextLine () {// 颜色变化var lineArr = document.getElementsByClassName('line'),len = lineArr.length;for (var i = 0;i < len;i++) {if (lineArr[i].className.indexOf('active-line') != '-1') {lineArr[i].className = 'line';lineArr[(i + 1) % len].className = 'active-line line';break;}}
}
function preLine () {// 颜色变化var lineArr = document.getElementsByClassName('line'),len = lineArr.length;for (var i = 0;i < len;i++) {if (lineArr[i].className.indexOf('active-line') != '-1') {lineArr[i].className = 'line';if (i - 1 < 0) {lineArr[len - 1].className = 'active-line line';}else {lineArr[i - 1].className = 'active-line line';}break;}}
}
//上一张
function prev () {prevPic();preLine();
}
//下一张
function next () {nextPic();nextLine();
}
//初始时定时切换
var timer = setInterval(next, 3000);
//鼠标放到轮播图上，暂停切换,显示prev、next按钮
document.getElementsByClassName('carousel')[0].addEventListener('mousemove', function () {clearInterval(timer);document.getElementsByClassName('prev')[0].style.display = 'block';document.getElementsByClassName('next')[0].style.display = 'block';
}, false)
//鼠标离开轮播图上，重新开始切换，隐藏prev、next按钮
document.getElementsByClassName('carousel')[0].addEventListener('mouseleave', function () {timer = setInterval(next, 3000);document.getElementsByClassName('prev')[0].style.display = 'none';document.getElementsByClassName('next')[0].style.display = 'none';
}, false)
//上一张
document.querySelector('.prev').addEventListener('click', function () {prev();
}, false)
//下一张
document.querySelector('.next').addEventListener('click', function () {next();
}, false)
//图片点击事件（只有点击before、after有切换）
document.querySelector('ul').addEventListener('click', function(e) {if (e.target.parentNode.className == 'before') {prev();}else if (e.target.parentNode.className == 'after') {next();}
}, false)
//移动到线上，切换图片
document.getElementsByClassName('lines')[0].addEventListener('mouseover', function (e) {//只有冒泡到div的类是line的时候才进行判断，其他情况不判断if (e.target.className == 'line' || e.target.className == 'active-line line') {//暂停切换clearInterval(timer);var lineArr = this.querySelectorAll('.line'),len = lineArr.length,target,temp,acitve;//找到active的位置和鼠标的位置active = index(lineArr,this.querySelector('.active-line'));target = index(lineArr,e.target);//进行移动temp = Math.abs(target - active);if (active > target) {while (temp) {prev();temp--;}}else {while (temp) {next();temp--;}}}}, false)
//离开线，重新开始定时切换
document.getElementsByClassName('lines')[0].addEventListener('mouseout', function (e) {if (e.target.className == 'line' || e.target.className == 'active-line line') {timer = setInterval(next, 3000);}
}, false)
//借鉴jquery的index(),找到子元素在父元素中的索引位置(就是给每个子元素添加一个自定义值index)
function index(father,target) {var i,len = father.length;for (i = 0;i < len;i++) {father[i].index = i;}for (i = 0;i < len;i++) {if (father[i].index == target.index) {return father[i].index;}}
}
</script>
</html>

原生JS实现小米轮播图和网易云轮播图相关推荐

JS轮播图（网易云轮播图）
JS 轮播图写在前面最聪明的人是最不愿浪费时间的人.--但丁实现功能图片自动切换鼠标移入停止自动播放,显示按钮点击按钮,实现前后翻鼠标移入小圆圈,可以跳转到对应图片点击左右两侧图片部分 ...
原生H5实现网易云轮播图
许久不更新了,今天做一个网易云的轮播图,就像下面这样先二话不多说,贴上代码: <!DOCTYPE html> <html lang="en"> <h ...
使用JS+CSS的网易云轮播图的实现（完整代码）
一个网易云轮播图的实现 <!DOCTYPE html> <html lang="chn"> <head><meta charset=&qu ...
原生js编写小米购物车
原生js编写小米购物车案例思路一.将数据渲染到下方ul中 1.遍历数据添加到li标签内二.渲染购物车内容,将ul中li添加到购物车.添加点击事件 1.加入购物车内容1.判断购物车内需不需要添加此 ...
html网易云音乐图片轮播效果,看网易云音乐如何在界面设计中突出特色功能
一般观念中一款产品的功能越具特色就会放在越突出的位置,但是如果一款产品层级较深,底层架构复杂导致若干功能优先级并列,那在UI设计中如何做到强化和弱化呢? 作为网易云音乐陈年老粉,不得不说这款产品做的真 ...
使用HTML+CSS制作网易云轮播
使用HTML和CSS制作网易云轮播今天现来说说使用CSS的动画技术来实现轮播.现看看效果图这里是八张图片渐入渐出的效果轮播. html代码: <!DOCTYPE html&g ...
记录下如何用vue实现PC端网易云轮播图效果
记录下自己写仿网易云音乐手写的轮播图,效果如图简单来说,这个轮播图原理是用css定位把所有图片叠再一起,显示前3张图片,第2张图片层里设置层级为最高,1,3俩张图片层级比2层级低,比其他图片高就行. ...
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案：svg + popper.js 定位引擎
要实现的效果如下图,3d 地图高亮自动轮播,展示白云区各个镇街的人口数局. 原由为什么想到这个方案,是因为我在用 echarts-gl 实现 3d 地图效果的过程中,我发现通过 dispatchA ...
JS实现网易云轮播效果图
1.div宽度直接与浏览器界面宽度一致:width:100% 2.怎么让图片在一个绝对定位的盒子中垂直居中显示? 继续加绝对定位.然后改变top,和left的值 3.采用外置的js文件,需要等到页面加 ...

原生JS实现小米轮播图和网易云轮播图

文章目录

小米轮播图

网易云轮播图

原生JS实现小米轮播图和网易云轮播图相关推荐

最新文章

热门文章