一，轮播图是现在项目中常见的效果之一，项目不同对轮播图的效果要求也不一样，最近做的项目用到两种轮播效果，今天就简单总结了下。
二，这里先展示一下效果图：
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部分：
// 获取DOMfunction $(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();})();
