前面已经介绍了两种常见的图片轮播样式，今天将介绍一种更为常见的图片轮播形式，和淘宝的功能样式类似，这三种轮播基本上涵盖了常见网站图片轮播的所有类型，难度的话，个人认为淡入淡出是比较难的，但只要用心，仔细的体会核心思想，一步步来，相信还是可以很好地掌握的！
<!DOCTYPE html><html lang="en"><!-- 主要思想 结合无缝轮播，使得图片可以完成循环，利用计时器，切换页面，其中，切换的核心思想为margin值的固定变化来实现图片的张张切换 --><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><!-- 利用margin-left的值的操作来实现图片的滚动 而不是之前的滚动条移动左边距 --><style>.all {width: 700px;height: 400px;position: relative;overflow: hidden;margin: 0 auto;}.block {width: 700px;height: 400px;position: relative;overflow: hidden;margin: 0 auto;}.block>div:nth-child(1) {width: 4900px;height: 400px;margin-left: 0px;}.block>div>img {float: left;width: 700px;height: 400px;}.nowpage {transition: margin-left 0.5s ease-in-out;}.point {position: absolute;width: 108px;height: 15px;bottom: 20px;left: 296px;}.point>div {width: 14px;height: 14px;border-radius: 50%;background-color: white;float: left;margin: 0 2px;border: 2px solid black;box-sizing: border-box;}.btn_left {width: 20px;height: 40px;background-color: rgba(158, 155, 155, 0.301);position: absolute;z-index: 9999;left: 0;top: 155px;text-align: center;line-height: 40px;color: rgba(250, 235, 215, 0.452);cursor: pointer;}.btn_left:hover {background-color: rgb(109, 101, 101);}.btn_right {width: 20px;height: 40px;background-color: rgba(158, 155, 155, 0.301);position: absolute;z-index: 9999;right: 0px;top: 155px;text-align: center;line-height: 40px;color: rgba(250, 235, 215, 0.452);cursor: pointer;}.btn_right:hover {background-color: rgb(109, 101, 101);}</style></head><body><div class="all"><div class="block"><div><img src="./img/1.jpg" alt=""><img src="./img/2.jpg" alt=""><img src="./img/3.jpg" alt=""><img src="./img/4.jpg" alt=""><img src="./img/5.jpg" alt=""><img src="./img/6.jpg" alt=""><img src="./img/1.jpg" alt=""></div><div class="point"><div></div><div></div><div></div><div></div><div></div><div></div></div></div><div class="btn_left"><</div> <div class="btn_right">></div></div><script>var block = document.getElementsByClassName('block')[0];var block_child = block.children[0];var point = document.getElementsByClassName('point')[0].children;var btn_left = document.getElementsByClassName('btn_left')[0];var btn_right = document.getElementsByClassName('btn_right')[0];var count = 0;var time;point[0].style.backgroundColor = 'black';window.onload = showpage();// 总函数，在页面加载完成后执行，由于位置已经在页面内容之下，所以可以直接调用function showpage() {time = setInterval(function () {page_onice();}, 2500)}// 将所有的函数都封装，方便调用// 执行一次的函数function page_onice() {block_child.className = 'nowpage';point[count].style.backgroundColor = 'white';count++;var index = count >= block_child.children.length - 1 ? 0 : count;// index为当前的索引point[index].style.backgroundColor = 'black';block_child.style.marginLeft = (-700 * count) + 'px';// 显示当前的图片setTimeout(function () {if (count >= block_child.children.length - 1) {count = 0;block_child.className = '';block_child.style.marginLeft = '0px';}}, 500)// 重点，动画完成执行以消除动画不执行bug}// 点击事件 功能优化block_child.onmouseenter = function () {clearInterval(time);}// 当鼠标进入时，停止计时器block_child.onmouseleave = function () {showpage();// 鼠标离开，开始计时器}btn_left.onclick = function () {point[count].style.backgroundColor = 'white';count--;if (count < 0) {block_child.className = '';count = 5;// 由于共有7张图，但是最后一张与第一张相同，所有只需从0~5block_child.style.marginLeft = '-4200px';// 重点，count=5时，最后一张图切完，现在显示为第七张图，然后切到第一张图，实现循环setTimeout(function () {block_child.className = 'nowpage';block_child.style.marginLeft = (-700 * count) + 'px';}, 1)//动画完成 1ms可以忽略不计} else {block_child.className = 'nowpage';block_child.style.marginLeft = (-700 * count) + 'px';// 因为是margin值，所以不分方向，只需要移动到相应的位置即可// 好像在哪说过这些话}point[count].style.backgroundColor = 'black';当前的图片对应点变色}btn_left.onmouseenter = function () {clearInterval(time);}btn_left.onmouseleave = function () {showpage();}// 当鼠标进入btn时，停止计时器// 出去时，开始计时器 下同// 老实说，右比左简单多了！btn_right.onclick = function () {page_onice();}btn_right.onmouseenter = function () {clearInterval(time);}btn_right.onmouseleave = function () {showpage();}// 由于是用margin值来移动图片的，所以不用考虑左右的区别，只是移动距离的关系// 这个比之前用层实现轮播简单多了for (var i = 0; i < point.length; i++) {point[i].index = i;point[i].onmouseenter = function () {// console.log(1);block_child.className = 'nowpage';block_child.style.marginLeft = (-700 * this.index) + 'px';point[count].style.backgroundColor = 'white';this.style.backgroundColor = 'black';count = this.index;}}// 消除切换页面bug // 页面可见性事件document.addEventListener('visibilitychange', function () {if (!document['hidden']) {showpage();} else {clearInterval(time);}});document.onselectstart = function () {return false;}//阻止用户复制</script></body></html>
这真的是心最累的一次注释，下一篇立体轮播图希望能活着写完！（皮一下很头疼）
