原生JS实现韩雪冬轮播图

分享一个用原生JS实现的韩雪冬轮播图，效果如下：

实现代码如下：

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>原生JS实现韩雪冬轮播图</title><style>*{margin:0;padding:0;}.wrap{width: 1200px;margin:0 auto;margin-top:100px;}.slide{position: relative;}.slide ul{height:426px;display: flex;list-style: none;position: relative;}.slide li{position:absolute;height: 300px;}.arrow{position: absolute;height:100%;width:100%;left:0;top:0;}.arrow a{position: absolute;height:100px;width:100px;top:163px;z-index: 200;text-decoration: none;font-size:80px;line-height: 100px;text-align: center;color:#ccc;}.prev{left:0px;}.next{right:0px;}</style></head><body><div class="wrap" id="wrap"><div class="slide" id="slide"><ul><li style="background-color: red;"></li><li style="background-color: green;"></li><li style="background-color: purple;"></li><li style="background-color: yellow;"></li><li style="background-color: black"></li></ul><div class="arrow" id="arrow"><a href="javascript:;" class="prev" id="arrowLeft">《</a><a href="javascript:;" class="next" id="arrowRight">》</a></div></div></div><script>// 标注了每个图片要运动到的位置// 配置单每张图片的大小位置层级透明度var config = [{width: 400,top: 20,left: 50,opacity: 0.2,zIndex: 2},{width: 600,top: 70,left: 0,opacity: 0.8,zIndex: 3},{width: 800,top: 100,left: 200,opacity: 1,zIndex: 4},{width: 600,top: 70,left: 600,opacity: 0.8,zIndex: 3},{width: 400,top: 20,left: 750,opacity: 0.2,zIndex: 2},];// 获取元素var wrap = document.getElementById("wrap");var slide = wrap.children[0];var array = slide.children[0];// 所有要进行运动的livar list = array.children;var arrow = slide.children[1];// 箭头的父容器var arrowLeft = arrow.children[0];var arrowRight = arrow.children[1];// 让每一个li运动到指定位置（根据config的内容）changePosition();// 移入移出box的时候，设置箭头的渐变效果wrap.onmouseover = function () {animate(arrow, { opacity: 1 });};wrap.onmouseout = function () {animate(arrow, { opacity: 0 });};var flag = true;arrowRight.onclick = function () {// 如果flag 值为true，这时可以执行代码if (flag) {// 设置flag为false，这时无法再次点击flag = false;// 修改config中对象的位置，将第一个对象添加到最后config.push(config.shift());// 让每个li运动到对应的位置上changePosition();}};arrowLeft.onclick = function () {if (flag) {flag = false;// 将config中的最后一个对象移动到最前面config.unshift(config.pop());// 让每个li运动到对应的位置上changePosition();}};function changePosition() {for (var i = 0; i < config.length; i++) {animate(list[i], config[i], function () {// 这个位置的代码会在运动完毕后执行// 这个位置书写的代码无法保证所有的图片均运动完毕// 只要有一个图片运动完，设置flag为trueflag = true;});}};function animate(tag, obj, callback) {clearInterval(tag.timer);tag.timer = setInterval(function () {// 假设当前这一次定时器代码执行可以设置清除（每个样式都到达了指定位置）var flag = true;// 先遍历objfor (var k in obj) {// 由于obj中有一些属性可能是zIndex或者opacity，这时需要单独处理if (k == "opacity") {// 将透明度当前值和目标值都设置为扩大后的倍数，设置时除以相应倍数即可var target = obj[k] * 100;var leader = getStyle(tag, k) * 100 || 0;var step = (target - leader) / 10;// 给step设置取整step = step > 0 ? Math.ceil(step) : Math.floor(step);leader = leader + step;// 透明度的设置需要去掉单位tag.style[k] = leader / 100;} else if (k == "zIndex") {// zIndex不需要渐变，直接设置即可tag.style.zIndex = obj[k];} else {var target = obj[k];var leader = parseInt(getStyle(tag, k)) || 0;var step = (target - leader) / 10;// 给step设置取整step = step > 0 ? Math.ceil(step) : Math.floor(step);leader = leader + step;tag.style[k] = leader + "px";}// 提取出每种条件都需要的代码if (leader != target) {flag = false;}}if (flag) {clearInterval(tag.timer);callback && callback();}}, 20);};function getStyle(tag, attr) {if (tag.currentStyle) {return tag.currentStyle[attr];} else {return getComputedStyle(tag, null)[attr];}}</script>
</body></html>

原生JS实现韩雪冬轮播图相关推荐

2021年原生JS实现韩雪冬轮播图
<!DOCTYPE html> <html><head lang="en"><meta charset="UTF-8" ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
【原生js】详解轮播图之无缝滚动
前言:轮播图,是网站首页中最常见的一种图片切换特效,作为前端开发者,我相信很多开发者都直接调用了JQuery中的封装好的方法实现图片轮播,省事简单.所以我今天想介绍一下原生js代码实现的图片轮播. 结 ...
原生js实现触摸滚动轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
html5图片无限循环播放,原生js实现无限循环轮播图效果
知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offs ...
基于原生JS写的异形轮播图--效果如网易云、QQ音乐播放器中轮播图
css部分 <style>#box{height:500px;width:1000px;position: relative;margin:100px auto;overflow: hid ...
原生JS制作最简单轮播图(超清晰思路)
使用html+css将页面制作完毕后,完成页面自动轮播,左右箭头点击图片改变,下方小按钮悬浮更改图片. 制作思路: CSS: 1.鼠标进入banner后左右箭头出现. .banner:hover #l ...
原生JS制作自动+手动轮播图，附带二级分类菜单
原生JS制作自动+手动轮播图,附带二级分类菜单包含以下功能: 1.鼠标移开自动轮播 2.鼠标移入停止自动轮播 3.点击左右按钮可手动切换图片 4.点击索引小圆点可手动切换图片 5.鼠标移入一级菜单展 ...

原生JS实现韩雪冬轮播图

原生JS实现韩雪冬轮播图相关推荐

最新文章

热门文章