丐版轮播图
<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> 基础轮播图 banner 移入移出</title><style>* {margin: 0;padding: 0;}body {display: flex;justify-content: center;}.banner {display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative;width: 500px;box-shadow: 0 0 8px #333;}.slider {display: flex;justify-content: space-around;align-items: center;position: absolute;bottom: 10px;width: 380px;}.slider span {width: 45px;height: 45px;line-height: 45px;background-color: orange;text-align: center;font-size: 20px;color: #fff;border-radius: 50%;cursor: pointer;}.btn-wrap span {user-select: none;position: absolute;top: 0;bottom: 0;margin: auto;width: 40px;height: 85px;line-height: 85px;font-size: 32px;color: #fff;text-align: center;background-color: rgba(0, 0, 0, .4);cursor: pointer;}.btn-wrap span:hover {background-color: rgba(0, 0, 0, .8);}.prev {left: 0;}.next {right: 0;}</style>
</head><body><div class="banner"><img id="pic" src="images/p1.jpg" width="500" height="375" alt="pkq"><div class="slider"><span style="background-color: pink;">1</span><span>2</span><span>3</span><span>4</span></div><div class="btn-wrap"><span class="prev"><</span><span class="next">></span></div></div><script>var oSlider = document.querySelector('.slider')var aSpan = document.querySelectorAll('.slider span')var oPic = document.querySelector('#pic')var oPrev = document.querySelector('.prev')var oNext = document.querySelector('.next')var index = 0var count = 4oNext.onclick = function () {aSpan[index].style.backgroundColor = 'orange';index++index = index % countoPic.src = `images/p${index + 1}.jpg`aSpan[index].style.backgroundColor = '#543';}oPrev.onclick = function () {aSpan[index].style.backgroundColor = 'orange';index--index = (index +count) % countoPic.src = `images/p${index + 1}.jpg`aSpan[index].style.backgroundColor = '#543';}oSlider.onmouseover = function (e) {if(e.target.tagName === 'SPAN') {aSpan[index].style.backgroundColor = 'orange';oPic.src = `images/p${e.target.innerText}.jpg`e.target.style.backgroundColor = '#543';index = e.target.innerText - 1}}</script>
</body></html>
进阶轮播图
<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> 基础轮播图 banner 移入移出</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}body {display: flex;justify-content: center;}.banner {display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative;width: 500px;height: 290px;margin-top: 100px;box-shadow: 0 0 12px #333;}.pic li {display: none;position: absolute;top: 0;left: 0;}.pic li.on {display: block;}.pic li img {width: 500px;height: 290px;}.slider {display: flex;justify-content: space-around;align-items: center;position: absolute;bottom: 10px;width: 380px;}.slider span {width: 45px;height: 45px;line-height: 45px;background-color: orange;text-align: center;font-size: 20px;color: #fff;border-radius: 50%;cursor: pointer;}.slider span.active {background-color: pink;}.btn-wrap span {user-select: none;position: absolute;top: 0;bottom: 0;margin: auto;width: 40px;height: 85px;line-height: 85px;font-size: 32px;color: #fff;text-align: center;background-color: rgba(0, 0, 0, .4);cursor: pointer;}.btn-wrap span:hover {background-color: rgba(0, 0, 0, .8);}.prev {left: 0;}.next {right: 0;}</style>
</head>
<body><div class="banner"><ul class="pic"><li class="on bg333 c368"><img src="images/p1.jpg" alt=""></li><li class="bg333 c368"><img src="images/p2.jpg" alt=""></li><li class="bg333 c368"><img src="images/p3.jpg" alt=""></li><li class="bg333 c368"><img src="images/p4.jpg" alt=""></li></ul><div class="slider"></div><div class="btn-wrap"><span class="prev"><</span><span class="next">></span></div></div><script>var oSlider = document.querySelector('.slider')var oPic = document.querySelector('.pic')var oWrap = document.querySelector('.btn-wrap')var switchWrap = {'prev': function () {switchSlider(function () {index--index = (index +count) % count})},'next': function () {switchSlider(function () {index++index = index % count})}}var index = 0var count = oPic.children.lengthcreateSlider()oWrap.addEventListener('click', function (e) {switchWrap[e.target.className] && switchSlider(switchWrap[e.target.className]())}, false)oSlider.addEventListener('mouseover', function (e) {if(e.target.tagName === 'SPAN') {switchSlider(function () {index = e.target.innerText - 1})}}, false)function switchSlider (callback) {oPic.children[index].classList.remove('on')oSlider.children[index].classList.remove('active')callback && callback() oPic.children[index].classList.add('on')oSlider.children[index].classList.add('active')}function createSlider () {var fragment = document.createDocumentFragment();for(var i = 0; i < count; i++) {var vDom = document.createElement('span')vDom.innerText = i + 1fragment.appendChild(vDom)}fragment.children[0].classList.add('on')oSlider.appendChild(fragment)}</script>
</body></html>
动画轮播自动播放
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> 轮播图 </title><style>* {margin: 0;padding: 0;}img {display: block;}ul {list-style: none;}body {display: flex;justify-content: center;}.banner {overflow: hidden;position: relative;width: 500px;box-shadow: 0 0 8px #333;}.pic-list {width: 100%;}.pic-list li {float: left;}.slider {display: flex;justify-content: space-around;align-items: center;position: absolute;bottom: 10px;width: 380px;left: 0;right: 0;margin: auto;}.slider span {width: 45px;height: 45px;line-height: 45px;background-color: orange;text-align: center;font-size: 20px;color: #fff;border-radius: 50%;cursor: pointer;}.btn-wrap span {user-select: none;position: absolute;top: 0;bottom: 0;margin: auto;width: 40px;height: 85px;line-height: 85px;font-size: 32px;color: #fff;text-align: center;background-color: rgba(0, 0, 0, .4);cursor: pointer;}.btn-wrap span:hover {background-color: rgba(0, 0, 0, .8);}.prev {left: 0;}.next {right: 0;}.slider .active {background-color: pink;}</style>
</head><body><div class="banner"><ul class="pic-list"><li><img src="images/1.jpg" alt="" width="500" height="200"></li><li><img src="images/2.jpg" alt="" width="500" height="200"></li><li><img src="images/3.jpg" alt="" width="500" height="200"></li><li><img src="images/4.jpg" alt="" width="500" height="200"></li></ul><div class="slider"></div><div class="btn-wrap"><span class="prev"><</span><span class="next">></span></div></div><script src="js/common.js"></script><script>var oBanner = $('.banner');var oUl = $('.pic-list');var aPic = $$('.pic-list li');var oBtnWrap = $('.btn-wrap');var oSlider = $('.slider');var aSlider = oSlider.children;var picW = aPic[0].offsetWidth;var picLen = aPic.length;var index = 0;var timer;var tapMap = {'prev': function (e) {move(function () {index--;index = (picLen + index) % picLen;})},'next': function (e) {move(function () {index++;index = index % picLen;})}}init();autoTranslate();function init() {var spanStr = '';var firstClass = '';oUl.style.width = `${picLen * 100}%`;for (var i = 0; i < picLen; i++) {firstClass = ''if (i === 0) {firstClass = 'class="active"';}spanStr += `<span ${firstClass}>${i + 1}</span>`;}oSlider.innerHTML = spanStr;}oBanner.addEventListener('mouseover', function () {clearInterval(timer);}, false);oBanner.addEventListener('mouseout', function () {autoTranslate();}, false)oBtnWrap.addEventListener('click', function (e) {e = e || window.event;if (e.target.tagName.toLowerCase() === 'span') {var btn = e.target;if (tapMap[btn.className] && typeof tapMap[btn.className] === 'function') {tapMap[btn.className](e);}}}, false);oSlider.addEventListener('mouseover', function (e) {e = e || window.event;if (e.target.tagName.toLowerCase() === 'span') {var sliderBtn = e.target;move(function () {index = getElementIdx(sliderBtn);})}}, false);function move(callback) {aSlider[index].classList.remove('active');callback && callback(); aSlider[index].classList.add('active');animate(oUl, {marginLeft: -index * picW + 'px'})}function autoTranslate() {clearInterval(timer);timer = setInterval(function () {move(function () {index++;index = index % picLen;});}, 1000)}</script>
</body></html>
无缝轮播
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> 轮播图 </title><style>* {margin: 0;padding: 0;}img {display: block;}ul {list-style: none;}body {display: flex;justify-content: center;}.banner {overflow: hidden;position: relative;width: 500px;box-shadow: 0 0 8px #333;}.pic-list {width: 100%;}.pic-list li {float: left;}.slider {display: flex;justify-content: space-around;align-items: center;position: absolute;bottom: 10px;width: 380px;left: 0;right: 0;margin: auto;}.slider span {width: 45px;height: 45px;line-height: 45px;background-color: orange;text-align: center;font-size: 20px;color: #fff;border-radius: 50%;cursor: pointer;}.btn-wrap span {user-select: none;position: absolute;top: 0;bottom: 0;margin: auto;width: 40px;height: 85px;line-height: 85px;font-size: 32px;color: #fff;text-align: center;background-color: rgba(0, 0, 0, .4);cursor: pointer;}.btn-wrap span:hover {background-color: rgba(0, 0, 0, .8);}.prev {left: 0;}.next {right: 0;}.slider .active {background-color: pink;}</style>
</head><body><div class="banner"><ul class="pic-list"><li><img src="images/1.jpg" alt="" width="500" height="200"></li><li><img src="images/2.jpg" alt="" width="500" height="200"></li><li><img src="images/3.jpg" alt="" width="500" height="200"></li><li><img src="images/4.jpg" alt="" width="500" height="200"></li></ul><div class="slider"></div><div class="btn-wrap"><span class="prev"><</span><span class="next">></span></div></div><script src="js/common.js"></script><script>var oBanner = $('.banner');var oUl = $('.pic-list');var aPic = $$('.pic-list li');var oBtnWrap = $('.btn-wrap');var oSlider = $('.slider');var aSlider = oSlider.children;var picW = aPic[0].offsetWidth;var picLen = aPic.length + 1;var index = 0;var timer;init();var tapMap = {'prev': function (e) {move(function () {if (index === 0) {index = aPic.length - 1;oUl.style.marginLeft = -index * picW + 'px';}index--;index = (picLen + index) % picLen;});},'next': function (e) {move(function () {if (index === aPic.length - 1) {console.log('我要瞬间调到0 然后慢慢走到1');index = 0;oUl.style.marginLeft = -index * picW + 'px';}index++; index = index % picLen; });}}function init() {var spanStr = '';var firstClass = '';oUl.style.width = `${picLen * 100}%`;for (var i = 0; i < picLen - 1; i++) {firstClass = ''if (i === 0) {firstClass = 'class="active"';}spanStr += `<span ${firstClass}>${i + 1}</span>`;}oSlider.innerHTML = spanStr;oUl.appendChild(aPic[0].cloneNode(true));aPic = $$('.pic-list li');autoTranslate();}oBanner.addEventListener('mouseover', function () {clearInterval(timer);}, false);oBanner.addEventListener('mouseout', function () {autoTranslate();}, false);oBtnWrap.addEventListener('click', function (e) {e = e || window.event;if (e.target.tagName.toLowerCase() === 'span') {var btn = e.target;if (tapMap[btn.className] && typeof tapMap[btn.className] === 'function') {tapMap[btn.className](e);}}}, false);oSlider.addEventListener('mouseover', function (e) {e = e || window.event;if (e.target.tagName.toLowerCase() === 'span') {var sliderBtn = e.target;move(function () {index = getElementIdx(sliderBtn);})}}, false);function move(callback) {aSlider[index % (aPic.length - 1)].classList.remove('active');callback && callback(); aSlider[index % (aPic.length - 1)].classList.add('active');animate(oUl, {marginLeft: -index * picW + 'px'})}function autoTranslate() {clearInterval(timer);timer = setInterval(function () {tapMap['next']();}, 1000)}</script>
</body></html>
