图片轮播
图片轮播的大概功能：
- 图片是以滑动的方式出现的
- 可以点击按钮来滑动到上一张和下一张
- 当下一张没有了，就左滑到下一张。当上一张没有了，就右滑到最后一张
- 可以点击导航小圆点来跳转到指定的某一张
- 鼠标在图片外时，图片可以自动滑动
- 鼠标停留在图片上停止滑动
其中的难点，核心就是第一点和第三点，做完这两点图片轮播就做了一半了。滑动给人的感觉就是图片在一排，每次整排移动一张图片大小的位置。当最后一张图片滑动时，先将前面所有图片按照原顺序依次排在后面，然后滑动，滑动动画结束后再将最后一张图片还原到最后位置上。我按照这种方式做完后发现图片很混乱，特别是在端点处的照片，不能按照自己的预期滑动。
然后就有了第二种方法，图片的滑动是给用户看的，每次滑动用户最多看见两张照片，所以我们不必考虑所有图片的排序，我们只需要将这两张排个序，在一起滑个动就行了。左滑到下一张就先把下一张图片移动到当前图片的后面，并一起左滑给用户看。右滑同理也一样。
查看效果：https://oleolema.github.io/blog/%E5%9B%BE%E7%89%87%E8%BD%AE%E6%92%AD/
贴上代码：
js:
(function () { var img4 = [ "http://ww2.sinaimg.cn/large/6834b4ddjw1f5yf4s5c3kj21jk1117wh.jpg", "http://ww3.sinaimg.cn/large/6834b4ddjw1f5yf5cjkcnj21jk2bce82.jpg", "http://ww3.sinaimg.cn/large/6834b4ddjw1f5yf29ywgzj21jk2bc4qq.jpg", "http://ww1.sinaimg.cn/large/6834b4ddjw1f5yf1jk9a6j21jk1nd1kx.jpg", "http://ww4.sinaimg.cn/large/6834b4ddjw1f5yf1ap491j21jk111kg9.jpg", "http://ww3.sinaimg.cn/large/6834b4ddjw1f5yf12bw82j21jk10m7te.jpg", "http://ww1.sinaimg.cn/large/6834b4ddjw1f5yf0uc0dsj21jk2bckjl.jpg", "http://ww1.sinaimg.cn/large/6834b4ddjw1f5yf0fs65vj21jk1gi7wh.jpg", "http://ww2.sinaimg.cn/large/6834b4ddjw1f5yeyqzzu3j21jk2bce81.jpg", "http://ww4.sinaimg.cn/large/679865b1gw1ehrlfhfw7hj20kd0ukaph.jpg", "http://ww3.sinaimg.cn/large/679865b1gw1ehrlfgckajj20kd0uk46i.jpg", "http://ww4.sinaimg.cn/large/679865b1gw1ehrlf95v9uj20kd0uk101.jpg", "http://ww4.sinaimg.cn/large/679865b1gw1ehrlf95v9uj20kd0uk101.jpg", "http://ww3.sinaimg.cn/large/679865b1gw1ehrlf55rx6j20kd0ukahs.jpg", "http://ww4.sinaimg.cn/large/679865b1gw1ehrlf46olyj20uk0kdtgh.jpg", "http://ww2.sinaimg.cn/large/679865b1gw1ehrlf3a784j20kd0ukdnq.jpg", "http://ww1.sinaimg.cn/large/679865b1gw1ehrlf2atjfj20kd0uktg6.jpg", "http://ww1.sinaimg.cn/large/679865b1gw1ehrlf1b3wxj20uk0kdgqb.jpg", "http://ww3.sinaimg.cn/large/679865b1gw1ehrlezufszj20uk0kd7bh.jpg", "http://ww4.sinaimg.cn/large/679865b1gw1ehrleyz61dj20uk0kd794.jpg", "http://ww4.sinaimg.cn/large/679865b1gw1ehrleya5qaj20uk0kdgr1.jpg", ]; var imgBox = document.getElementsByClassName('imgBox')[0]; //获取盒子 var imgBoll = document.createElement('div'); //创建一个图片导航点 var imgBoxWidth = imgBox.offsetWidth; //盒子宽度 var img = []; //所有图片 var imgIndex = 0; //当前显示的图片下标 var isRotate = false; //防止多个定时器同时执行 var timer; createLabel(); //创建标签 init(); //初始化 function createLabel() { for (var i = 0; i < img4.length; i++) { img.push({ img: document.createElement('img'), boll: document.createElement('div'), src: img4[i], a: document.createElement('a'), herf: "javascript:void(0);" }); img[img.length - 1].img.src = img[img.length - 1].src; //设置图片来源 img[img.length - 1].img.style.width = imgBoxWidth + 'px'; //图片大小和盒子一样大 img[img.length - 1].a.style.top = '0px'; //初始化位置 img[img.length - 1].a.style.left = imgBoxWidth * i + 'px'; //初始化位置 img[img.length - 1].boll.className = "smallBoll" //命名className img[img.length - 1].boll.style.bottom = '10%'; //下面间隔 img[img.length - 1].boll.style.left = (imgBoxWidth - 20 * img4.length) / 2 + i * 20 + 'px'; //中间对齐 img[img.length - 1].boll.onclick = function () { //绑定点击 if (isRotate) { return; } img[imgIndex].boll.className = "smallBoll"; this.className = "selectBoll"; var thatIndex; //找到当前的下标 for (var i = 0; i < img.length; i++) { if (this == img[i].boll) { thatIndex = i; break; } } if (thatIndex > imgIndex) { var step = thatIndex - imgIndex; var timer = setInterval(function () { nextImg(step * 10); //距离越远切换越快 if (thatIndex == imgIndex + 1) { clearInterval(timer); return; } }, 1); } else if (thatIndex < imgIndex) { var step = imgIndex - thatIndex; var timer = setInterval(function () { preImg(step * 10); if (thatIndex == imgIndex - 1) { clearInterval(timer); return; } }, 1); } } //插入 imgBoll.appendChild(img[img.length - 1].boll); img[img.length - 1].a.appendChild(img[img.length - 1].img); //图片插入到a标签中 imgBox.appendChild(img[img.length - 1].a); //a标签插入到盒子中 } } function init() { imgBoll.className = 'imgbollBox'; imgBox.appendChild(imgBoll); img[imgIndex].boll.className = "selectBoll"; img[0].img.onload = function () { //第一张图片加载完成 imgBox.style.height = img[0].img.offsetHeight + 'px'; //调整盒子大小为第一张图片的大小 var preImgButton = document.getElementsByClassName('preImg')[0]; var nextImgButton = document.getElementsByClassName('nextImg')[0]; nextImgButton.style.height = img[0].img.offsetHeight + 'px'; nextImgButton.onclick = function () { nextImg() }; //绑定点击 document.getElementsByClassName('nextImgShell')[0].style.height = img[0].img.offsetHeight + 'px'; preImgButton.style.height = img[0].img.offsetHeight + 'px'; preImgButton.onclick = function () { preImg() }; document.getElementsByClassName('preImgShell')[0].style.height = img[0].img.offsetHeight + 'px'; timer = setInterval(function () { nextImg(); }, 3000); } imgBox.onmouseover = function () { //鼠标放在图片上不自动滑动图片 clearInterval(timer); } imgBox.onmouseout = function () { //离开图片重新开始滑动图片 timer = setInterval(function () { nextImg(); }, 3000); } } function nextImg(setStep) { if (isRotate) { return; } isRotate = true; var that = imgIndex % img.length; //当前图片 var next = (imgIndex + 1) % img.length; //下一张图片 img[that].boll.className = "smallBoll"; img[next].boll.className = "selectBoll"; //将下一张图片移动到当前图片后，并一起滑动 img[next].a.style.left = imgBox.offsetWidth + 'px'; //滑动动画 (function () { var step = setStep || 10; var count = 0; var timer = setInterval(function () { if (++count * step >= imgBoxWidth) { img[that].a.style.left = -imgBoxWidth + 'px'; //对齐盒子 img[next].a.style.left = '0px'; clearInterval(timer); imgIndex = next; isRotate = false; return; } img[next].a.style.left = img[next].a.offsetLeft - step + 'px'; img[that].a.style.left = img[that].a.offsetLeft - step + 'px'; }, 1); }()); } function preImg(setStep) { if (isRotate) { return; } isRotate = true; var that = imgIndex % img.length; //当前图片 var pre = (imgIndex + img.length - 1) % img.length; //下一张图片 img[that].boll.className = "smallBoll"; img[pre].boll.className = "selectBoll"; //将上一张图片移动到当前图片前，并一起滑动 img[pre].a.style.left = -imgBox.offsetWidth + 'px'; //滑动动画 (function () { var step = setStep || 10; var count = 0; var timer = setInterval(function () { if (++count * step >= imgBoxWidth) { img[that].a.style.left = imgBoxWidth + 'px'; //对齐盒子 img[pre].a.style.left = '0px'; clearInterval(timer); imgIndex = pre; isRotate = false; return; } img[pre].a.style.left = img[pre].a.offsetLeft + step + 'px'; img[that].a.style.left = img[that].a.offsetLeft + step + 'px'; }, 1); }()); } }());
css:
* { margin: 0px; padding: 0px; } .imgBox { width: 800px; overflow: hidden; position: relative; } .imgBox a { position: absolute; } .smallBoll, .selectBoll { width: 12px; height: 12px; position: absolute; background: #eee; user-select: none; border-radius: 50%; opacity: 0.618; } div.selectBoll { background: rgb(0, 255, 0); } .preImgShell, .nextImgShell { width: 60px; user-select: none; position: absolute; z-index: 8888; } .preImgShell { left: 0px; } .nextImgShell { right: 0px; } .preImg, .nextImg { width: 80px; user-select: none; background: #eee; line-height: 50px; text-align: center; position: absolute; z-index: 9999; transition: all 0.5s; } .preImg { left: -80px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAMAAADDpiTIAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAI27AACNuwGddYGAAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAVxQTFRF////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJDo9JgAAAHN0Uk5TAAECAwYHCAkKCw0PEBESExUWFxgZGx0gIycoLS4vMDIzNDU2Nzg/QEFDREZISUpLTE1OUlNUWGFiaGtsbXF5e3x/g4WHiYqQk5SXmJudn6KssLS3uLu8vsPGx8rR1dfc3uHj5OXm7O3u7/Dz9PX2+Pn7/vWanfgAAAU0SURBVHja7dxZc1QFFIVR5imIgswGQSEgBEiACDSDQBQFFMI8hiHMIEknnP9f5YsvWtDpVKWK9N1r/YTz7Ye+dW/1okUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHfVt2zvYv36JQwRaM3Lt6VRVVdXMy5utzS6SZHnrznT91/joRncJsfTERH3C5G9fuU2CkSf1Ge9+Wek8TbdirDoY3+JCzbbpUXX0+ic3arKBVzWLmdOu1FxH2zW7C+7U2P7TXfSvj8dcKrl/1Yfv3KqJjnTZv+rZ166V3L/qunNF96/a7WDR/euui0X3r9rvZtH966GjRfev8lIgu3+dcrfo/nXL4aL7V3u10yX3rxp0u+j+ddLxovvXOdeL7l+XnC+6vxdC4f3rtgNG968xF4zuX787YXT/OuuG0f3ruCNG968drhjd/7krRvevP50xun8Nu2OvGp6P/lOrHDK5vzcB4f0/bHDJ5P71q0tG93+71imT+1fLKaP7X3XK6P4Plrllcv8X37plcv/3u9wyuv8et9Qf/dEf/dEf/dEf/dEf/dEf/dGfL21If/31119//fXXX3/99ddff/31119//fXXX3/99ddff/31119//fXXX3/99ddff/3RH/3pnf5t/fXXX3/9Ex3WX3/99ddff/31119//fXXX3/99ddff/31119//fXXX3/99ddff/31119//fXXX3/0R3/0R38WvEP666+//vrrr7/++uuvv/7666+//vrrr7/++uuvv/7666+//vrrr7/++uuvv/7664/+6I/+6I/+LGgH9ddff/31119//fXXX3/99ddff/31119//fXXX3/99ddff/31119//fXXX3/99dcf/dEf/dEf/TEALAALoPEL2O2WFoAFYAFYABaABWABWAAWgAVgAVgAFoAFYAFYABaABWABWAANXcCPbtmbDlmABViABViABViABViABViABViABViABViABViABViABczZOwuwACwAC8ACsAAsAAvAArAAshbwg1taABaABdBrDluABViABViABViABViABViABViABViABViABViABViABViABViABViABViABViABViABViABXSzgF1uaQFYABaABWAB9JIhC7AAC7CAefDWAnp1AdMWYAEWYAEWYAEWYAEWYAEWYAEWYAEWYAEWYAEWYAEWYAEWYAEWYAEWYAFzWMBOt7QALAALwAKwACwAC6BXDFuABViABViABViABViABViABViABViABViABViABViABViABViABViABcxlAf1umb2AifVumb2A+8vcMnsBfzll+AJaTpm9gDd9Tpm9gFGXzF7A354Ewhfwh0NmL2BypUP2rCPzsYAhd8xewBVnzF7Ac1cMX8AOV8xewHFHzF7AWTfMXsBFJ8xewJgLZi/gtgNmL+C6+2Uv4LLzZS/gnOtlL+Ck42UvYNDtohfQXu100Qu45XDZCzjlbtkL2OJs0Qt46GjZCzjgZtELuOdi2QsYcLDoBdxwrugF+IeAZjra5QImv3er5AV8/NmlGruAdhcDuOBOzTXwarb8M2dcqck2Perc/81+N2q2FWOd+j/e6kKNN/Lkc/nfn/cRQIKlJyY+lX/q4jq3CbG8def/T4TjoxvdJcmakWtPp/794f/iZmuziyTq275vsP+bxQ4BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC84/qncrXYnHpX0AAAAASUVORK5CYII=) 100px 0px; background-size: 120px 200px; background-position: center; background-repeat: no-repeat; } .nextImg { right: -80px; background: url(data:image/png;base64,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) 100px 0px; background-size: 120px 200px; background-position: center; background-repeat: no-repeat; } .preImgShell:hover .preImg { left: 0px; } .nextImgShell:hover .nextImg { right: 0px; }
html:
<!DOCTYPE html> <html lang="en"> <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>Document</title> <link rel="stylesheet" href="imgRotate.css"> </head> <body> <div class="imgBox"> <div class="preImgShell"> <div class="preImg"></div> </div> <div class="nextImgShell"> <div class="nextImg"></div> </div> </div> </body> <script src="imgRotate.js"></script> </html>
BY oleolema
