完整无缝轮播图的原理和实现 |
您所在的位置：网站首页 › 无缝衔接配图 › 完整无缝轮播图的原理和实现 |
完整无缝轮播图的原理和实现
|
无缝轮播图
原理：
首先需要一个装所有图片的盒子。然后通过移动装图片的盒子来使图片显示出来。需要封装一个移动框架，在图片移动时有时间缓冲。如果需要感觉图片移动时连贯的话，就需要将第一张图片复制一张到最后面，然后当图片切换到最后一张图片时候，立马将图片跳转至第一张，就会给我们一种图片是连贯的错觉。需要用到的知识点：定位，浮动，动画，定时器
2.实现 12.无缝轮播图 * { padding: 0; margin: 0; } li { list-style: none; } #box { position: relative; width: 520px; height: 280px; margin: 50px auto; border: 1px solid #ccc; overflow: hidden; } #box ul { position: absolute; left: 0; top: 0; height: 280px; width: 5000px; } #box ul li { float: left; width: 520px; height: 280px; } #leftBtn, #rightBtn { position: absolute; top: 90px; width: 45px; height: 100px; background: url('img/sprite.png') no-repeat; } #rightBtn { right: 0; background-position: -45px 0; } #box p { position: absolute; left: 0; bottom: 6px; width: 100%; height: 20px; line-height: 20px; text-align: center; } #box p span { display: inline-block; width: 10px; height: 10px; background-color: #ccc; border-radius: 50%; margin: 0 3px; cursor: pointer; } #box p span.active { background-color: red; } 
// 获取元素 var box = document.querySelector('#box'); var imgbox = document.querySelector('ul'); var lis = box.querySelectorAll('li'); // 获取按钮 var leftBtn = document.getElementById('leftBtn'); var rightBtn = document.getElementById('rightBtn'); // 获取span 小圆点按钮 var spans = box.querySelectorAll('span'); // 获取一个图片的宽度 var imgW = lis[0].offsetWidth; // 记录第几张图片 var count = 0; var timer = null; var flag = true;//让轮播动画完成，才开启下一个轮播图片 // 无缝链接 克隆第一个节点 imgbox.appendChild(lis[0].cloneNode(true)); // 实现每3s切换一个图片 timer = setInterval(auto, 2000); // 当鼠标移入 定时器停止，移除开启定时器 box.onmouseover = function () { clearInterval(timer); } box.onmouseout = function () { timer = setInterval(auto, 2000); } // 点击小圆点切换图片 for (var i = 0; i < spans.length; i++) { spans[i].index = i; spans[i].onclick = function () { count = this.index - 1; auto(); } } // 左右按钮切换 rightBtn.onclick = function () { clearInterval(timer); if (flag) { flag = false; auto(); } } leftBtn.onclick = function () { clearInterval(timer); if (flag) { if (count == 0) { count = lis.length; imgbox.style.left = -count * imgW + 'px'; } count--; flag = false; change(); } } // 轮播移动函数 function auto() { if (count === lis.length) { count = 0; imgbox.style.left = 0; } count++; change(); } // 动态的 图片切换 function change() { // imgbox.style.left = -(imgW * count) + 'px'; move(imgbox, { left: -(imgW * count) }, function () { flag = true; }); // 小圆点的切换 for (var i = 0; i < spans.length; i++) { // 清空原有样式 spans[i].className = ''; // 给当前图片对应的小圆点 设置样式 if (count === lis.length) { spans[0].className = 'active'; } else { spans[count].className = 'active'; } } } 其中按钮设置了需要动画播放完成之后，才可以切换下一张图片，这样就可以使播放比较连贯。 这里还只是静态的，后续也可以通过从后端获取图片资源，动态的创建标签和类。然后实现图片轮播。 欢迎一起讨论^_^
|
【本文地址】