js原生代码实现轮播图淡入淡出和滚动的效果

一，轮播图是现在项目中常见的效果之一，项目不同对轮播图的效果要求也不一样，最近做的项目用到两种轮播效果，今天就简单总结了下。

二，这里先展示一下效果图：
1，淡入淡出效果：

2，滚动效果：

三，话不多说，先上代码：
1，HTML部分：

<!DOCTYPE html>
<html lang="zh-Hans">
<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>js - 轮播图</title><!-- 引入样式 --><link rel="stylesheet" href="./css/normalized.css"><link rel="stylesheet" href="./css/index.css">
</head>
<body><main class="content"><!-- 淡入淡出 --><section class="fade"><h1 class="title">淡入淡出效果</h1><div class="fade-flash-wrapper flash-wrapper"><!-- 图片显示区域 --><div class="img-box"><img class="show" src="./images/01.jpg" alt="图片加载失败..."><img src="./images/02.jpg" alt="图片加载失败..."><img src="./images/03.jpg" alt="图片加载失败..."><img src="./images/04.jpg" alt="图片加载失败..."><img src="./images/05.jpg" alt="图片加载失败..."><img src="./images/06.jpg" alt="图片加载失败..."></div><!-- 左右按钮区域 --><div class="btn-box"><span class="btn prev"></span><span class="btn next"></span></div><!-- 分页指示区域 --><div class="idot-box"><span class="idot selected"></span><span class="idot"></span><span class="idot"></span><span class="idot"></span><span class="idot"></span><span class="idot"></span></div></div></section><!-- 滚动 --><section class="scroll"><h1 class="title">滚动效果</h1><div class="scroll-flash-wrapper flash-wrapper"><!-- 图片显示区域 --><div class="img-box"><img src="./images/06.jpg" alt="图片加载失败..."><img src="./images/01.jpg" alt="图片加载失败..."><img src="./images/02.jpg" alt="图片加载失败..."><img src="./images/03.jpg" alt="图片加载失败..."><img src="./images/04.jpg" alt="图片加载失败..."><img src="./images/05.jpg" alt="图片加载失败..."><img src="./images/06.jpg" alt="图片加载失败..."><img src="./images/01.jpg" alt="图片加载失败..."></div><!-- 左右按钮区域 --><div class="btn-box"><span class="btn prev"></span><span class="btn next"></span></div><!-- 分页指示区域 --><div class="idot-box"><span class="idot selected"></span><span class="idot"></span><span class="idot"></span><span class="idot"></span><span class="idot"></span><span class="idot"></span></div></div></section></main><!-- 引入脚本 --><script src="./js/common.js"></script><script src="./js/index.js"></script>
</body>
</html>

2，CSS部分：

@charset 'UTF-8';
/*样式初始化*/
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
a   { text-decoration: none; }
img { vertical-align: middle; }
ul, li  { list-style: none; }
input, button, textarea { outline: none; border: none;}
.fl { float: left;}
.fr { float: right;}
.clearFix { zoom: 1; }
.clearFix:after { content: ''; display: block; height: 0; visibility: hidden; clear: both; }.flex-row-col-cen { display: flex; display: -webkit-flex; justify-content: center; align-items: center; flex-wrap: wrap; }.content {text-align: center;margin-bottom: 200px;min-width: 1100px;overflow: hidden;
}.title {color: #333;display: inline-block;margin: 70px auto 40px;letter-spacing: 5px;padding: 8px 50px;border-bottom: 1px solid #333;
}/* 公共样式 */
.flash-wrapper {position: relative;
}
.flash-wrapper .btn{display: block;width: 45px;height: 35px;cursor: pointer;position: absolute;top: 50%;transform: translateY(-50%);
}
.flash-wrapper .prev {left: 35px;background: url("../images/arr_left.png") no-repeat center center;
}
.flash-wrapper .next {right: 35px;background: url("../images/arr_right.png") no-repeat center center;
}.flash-wrapper .idot-box {position: absolute;left: 50%;transform: translateX(-50%);bottom: 25px;
}
.flash-wrapper .idot {display: inline-block;width: 14px;height: 14px;border-radius: 50%;background: purple;border: 1px solid purple;margin: 0 10px;cursor: pointer;box-sizing: border-box;transition: all .25s linear;
}
.flash-wrapper .idot:hover {background: #fff;
}
.flash-wrapper .idot.selected {background: #fff;
}
.flash-wrapper img {width: 100%;vertical-align: middle;
}/* 淡入淡出 */
.fade-flash-wrapper img {opacity: 0;transition: opacity .75s linear;
}
.fade-flash-wrapper img:not(:first-child){position: absolute;top: 0;left: 0;
}
.fade-flash-wrapper img.show {opacity: 1;
}/* 滚动效果 */
.scroll-flash-wrapper .img-box {width: calc(8 * 100%);font-size: 0;position: absolute;left: 0;top: 0;
}
.scroll-flash-wrapper img {width: calc(100% / 8);
}

3，淡入淡出效果js部分：

// 获取DOM
function $(Sel, isAll) {if(isAll) {return document.querySelectorAll(Sel);}else {return document.querySelector(Sel);}
}/*** 获取非行内样式* @param el     目标元素节点* @param attr   对应属性键（key）* @returns {*}  对应属性值（value）*/
function getStyle(el, attr) {// 兼容IEif (el.currentStyle) {return el.currentStyle[attr];} else {return getComputedStyle(el, null)[attr];}
}//淡入淡出function fade() {// 1. 获取DOM元素var _prevBtn  = $('.fade .prev');var _nextBtn  = $('.fade .next');var _imgs     = $('.fade img', true);var _idots    = $('.fade .idot', true);var _wrapper  = $('.fade-flash-wrapper');var _curIndex = 0; var _timer    = null;// 2. 左右切换_prevBtn.onclick = function() {// 切换下标if(_curIndex === 0) {_curIndex = 5;}else {_curIndex--;}// 切换图片tab();updateIdot();}_nextBtn.onclick = function() {// 切换下标if(_curIndex === 5) {_curIndex = 0;}else {_curIndex++;}// 切换图片tab();updateIdot();}// 3. 点击小圆点切换_idots = Array.from(_idots); // es6 转数组_idots.forEach(function(idot, index) {// 添加自定义属性// data-indexidot.dataset.index = index;idot.onclick = function() {var index = parseInt(this.dataset.index);// 异常处理if(index === _curIndex) {return;}// 更新当前显示下标_curIndex = index;// 切换图片tab();updateIdot();}});// 4. 自动切换play();// 5. 鼠标移入，停止定时器//    鼠标移出，启动定时器_wrapper.onmouseenter  = stop;_wrapper.onmouseleave = play;// 6. 函数封装function play() {console.log('启动');_timer = setInterval(function() {_nextBtn.onclick();}, 3000);}function stop() {console.log('暂停');clearInterval(_timer);}function updateIdot() {for(var i = 0, len = _idots.length; i < len; i++) {if(_idots[i].classList.contains('selected')) {_idots[i].classList.remove('selected');break;}}_idots[_curIndex].classList.add('selected');}function tab() {// 显示_curIndex指定的图片// 异常处理/隐藏上一次显示的图片for(var i = 0, len = _imgs.length; i < len; i++) {if(_imgs[i].classList.contains("show")) {_imgs[i].classList.remove("show");break;}}_imgs[_curIndex].classList.add("show");}
}

4，滚动效果js部分：


//滚动效果
function scroll() {// 1. 获取DOM元素var _prevBtn     = $('.scroll .prev');var _nextBtn     = $('.scroll .next');var _idots       = $('.scroll .idot', true);var _wrapper     = $('.scroll-flash-wrapper');var _imgBox      = $('.scroll .img-box');var _curIndex    = 1; var _timer       = null;  // 存储定时器/自动播放使用var _isAnimating = false; // 记录动画状态var _kWidth      = parseInt(getStyle(_wrapper, "width"));// 2. 自适应处理// 由于元素绝对定位脱离文档流，故父级元素无法获取子元素高度// 但我们可以通过脚本获取子元素高度之后赋值给容器即可_wrapper.style.height  = getStyle(_imgBox, "height");_imgBox.style.left     = "-" + _kWidth + "px";// 监听窗口变化/重新计算容器尺寸window.onresize = function() {_kWidth   = parseInt(getStyle(_wrapper, "width"));_wrapper.style.height  = getStyle(_imgBox, "height");}// 3. 左右切换_prevBtn.onclick = function() {// 异常处理// 当上一次切换动画还为结束时，禁止切换if(_isAnimating) { return; }// left 在当前位置的基础上(+|-)kWidthif(_curIndex === 1) {_curIndex = 6;}else {_curIndex--;}tab(+_kWidth);updateIdot();}_nextBtn.onclick = function() {if(_isAnimating) { return; }if(_curIndex === 6) {_curIndex = 1;}else {_curIndex++;}tab(-_kWidth);updateIdot();}// 4. 小圆点切换_idots.forEach(function(idot, index) {idot.dataset.index = index + 1;idot.onclick = function() {var index = parseInt(this.dataset.index);if(index === _curIndex || _isAnimating) {return;}// 计算偏移// -(desIndex - curIndex) * _kWidthvar offset = -(index - _curIndex) *  _kWidth;// 切换tab(offset);// 更新下标显示_curIndex = index ;// 更新小圆点显示updateIdot();}});// 5. 自动播放play();// 6. 异常处理 // 鼠标移入 停止定时器// 鼠标移出 启动定时器_wrapper.onmouseenter = stop;_wrapper.onmouseleave = play;// 7. 函数封装function play() {_timer = setInterval(function() {_nextBtn.onclick();}, 3000);}function stop() {clearInterval(_timer);}function updateIdot() {for(var i = 0, len = _idots.length; i < len; i++) {if(_idots[i].classList.contains('selected')) {_idots[i].classList.remove('selected');break;}}_idots[_curIndex - 1].classList.add('selected');}function tab(offset) {// 更新动画状态_isAnimating = true;// 滚动效果var duration = 600,interval = 10,frames   = duration / interval,speed    = Math.ceil(offset / frames);var curLeft  = parseInt(_imgBox.style.left);var desLeft  = curLeft + offset;var isScroll = false;var t = setInterval(function() {// 更新当前偏移// offset < 0  左 curLeft > desLeft // offset > 0  右 curLeft < desLeftcurLeft  = parseInt(_imgBox.style.left);isScroll = (offset < 0 && curLeft > desLeft) || (offset > 0 && curLeft < desLeft);if(isScroll) {_imgBox.style.left = curLeft + speed + "px";}else {// 清除定时器clearInterval(t);// 更新动画状态_isAnimating = false;// 更新偏移_imgBox.style.left = desLeft + 'px';// 无限滚动if(desLeft < -6 * _kWidth) {_imgBox.style.left = -_kWidth + 'px';}else if(desLeft > -_kWidth) {_imgBox.style.left = -6 * _kWidth + 'px';}}}, interval);}
}

5，最后直接调用相应的函数即可：

(function() {// 淡入淡出效果fade();// 滚动效果scroll();
})();

js原生代码实现轮播图淡入淡出和滚动的效果相关推荐

jQuery轮播图淡入淡出
效果:实现自动切换,点击停止,左右点击切换,底部圆点切换 HTML <body><div id="box"><div class="imgs ...
html轮播图淡入淡出,一个简洁的Jquery效果 banner轮播（1）淡入淡出效果
朋友给我看了一个轮播效果,把js下载一看,丫丫的一个这么简单的效果,这么的就能写个几百行的,严重影响浏览器加载速度嘛,以为人家宽带流量不要钱玩的哦..无奈之下给他写了个简单的,把所有代码放上去都没有超 ...
原生JS实现韩雪冬轮播图
分享一个用原生JS实现的韩雪冬轮播图,效果如下: 实现代码如下: <!DOCTYPE html> <html><head lang="en">& ...
2021年原生JS实现韩雪冬轮播图
<!DOCTYPE html> <html><head lang="en"><meta charset="UTF-8" ...
用uni-app开发的微信小程序轮播图----和用微信小程序原生开发的轮播图
话不多说,附赠代码以下是用uni-app开发的轮播图 <template><view class="recommend"><view class=& ...
JQ代码实现轮播图功能
轮播图一般是横向滚动,我自己做了一个竖向滚动的轮播图,代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
html轮播台袋效果,使用html+js+css 实现页面轮播图效果(实例讲解)
html 页面轮播图效果 < > css页面 carousel.css #main{ width: 655px; height: 361px; position: relative; } ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
【原生js】详解轮播图之无缝滚动
前言:轮播图,是网站首页中最常见的一种图片切换特效,作为前端开发者,我相信很多开发者都直接调用了JQuery中的封装好的方法实现图片轮播,省事简单.所以我今天想介绍一下原生js代码实现的图片轮播. 结 ...

js原生代码实现轮播图淡入淡出和滚动的效果

js原生代码实现轮播图淡入淡出和滚动的效果相关推荐

最新文章

热门文章