1、html
<body> <div class="all" id='box'> <div class="screen" id="screen"> <ul> <li> <img src="0.jpg" width="500" height="300" /> </li> <li> <img src="1.jpg" width="500" height="300" /> </li> <li> <img src="3.jpg" width="500" height="300" /> </li> <li> <img src="4.jpg" width="500" height="300" /> </li> <li> <img src="5.jpg" width="500" height="300" /> </li> </ul> <ol> </ol> </div> 左右按钮 <div id="arr"> <span id="left"><</span> <span id="right">></span> </div> </div> </body>2、CSS
<style type="text/css"> * { padding: 0; margin: 0; list-style: none; border: 0; } .all { width: 500px; height: 300px; padding: 7px; border: 1px solid #ccc; margin: 100px auto; position: relative; } .screen { width: 500px; height: 300px; overflow: hidden; position: relative; } .screen li { width: 500px; height: 300px; overflow: hidden; float: left; } .screen ul { position: absolute; left: 0px; top: 0px; width: 3000px; } .all ol { position: absolute; right: 10px; bottom: 10px; line-height: 20px; text-align: center; } .all ol li { float: left; width: 20px; height: 20px; background: #fff; border: 1px solid #ccc; margin-left: 10px; cursor: pointer; } .all ol li.c { background: yellow; } #arr { display: none; z-index: 1000; } #arr span { width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #000; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑体'; font-size: 30px; color: #fff; opacity: 0.3; border: 1px solid #fff; } #arr #right { right: 5px; left: auto; } </style>3、js部分
<script> //点击12345按钮同点击左右箭头按钮一样都是获取left的值进行移动 //通过全局下标进行选中某一张图片 //1 获取所有的节点 let imgs = document.getElementById('screen') let ulobj = document.querySelector('ul') let liobj = ulobj.children; let olobj = imgs.lastElementChild; //左右按钮 let leftobj = document.getElementById('left') let rightobj = document.getElementById('right') let times = ''; //2、创建和图片相等数量的右下按钮 let imglen = liobj.length; for (var i = 0; i < imglen; i++) { let btn = document.createElement('li') btn.innerHTML = i + 1; // console.log(i); //默认第一个li选中 if (i == 0) btn.className = 'current' //给brtn绑定点击事件 btn.onclick = banner; //自定义属性，将li对应的下标保存 //创建以key为class 以i为属性值的 li标签 btn.setAttribute('key', i) //追加到olobj olobj.appendChild(btn) } //声明全局索引/下标 图片的下标 var imgindex = 0; // console.log(imgW); //3、让点击的按钮选中 function selol() { //遍历ol中li数组 for (var i = 0; i < olobj.children.length; i++) { //清除li中所有的current名 olobj.children[i].classList.remove('current') } //给当前操作的添加current名 olobj.children[imgindex].classList.add('current') } //4、获取图片的宽度 var imgW = liobj[0].offsetWidth; //5、选中当前的图片，清除其他的点击按钮的回调函数 banner function banner() { //获取key的属性值 可理解下标 imgindex = this.getAttribute('key') console.log(this.getAttribute('key')); console.log(imgindex); //计算图片的位置 var target = -imgindex * imgW; //ulobj运动 //{方向left 目标target} startMove(ulobj, { left: target }, function () { console.log('GG'); }) selol(); } //6、鼠标移到box上显示左右按钮，移走则消失 imgs.parentElement.onmouseover = function () { leftobj.parentElement.style.display = 'block' //鼠标移入清除定时器 clearInterval(timess) } imgs.parentElement.onmouseout = function () { leftobj.parentElement.style.display = 'none' //鼠标移出之后执行 autopleay() } //7、克隆第一张图片放在最后 // cloneNode 克隆个节点 //cloneNode(true) 深克隆,将子节也克隆 let cloneimg = liobj[0].cloneNode(true); //console.log(cloneimg); //放在ul的最后 cloneimg.style.borderTop = 'solid 1px red' ulobj.appendChild(cloneimg) //10 如果点击过快会造成图片一直在换,需要让图片点击之后自动按时间更换 //所以要设置防止过快的点击按钮 //默认可以点击 因为要进行更换图片 let isclick = true // 8 右边按钮 下一张********* rightobj.onclick = function () { if (!isclick) return isclick = false // console.log(111); var change = false /*8-1判断是否是最后一张图片,如果是最后一张则进入步骤 7 克隆的图片 如果不是则向下轮播 */ //10-1当正在更换图片的时候将isclick改为false 不可选中实现不能连续点击 //点击之后为false则停止代码运行 //当imgindex为最后一个也就是5的时候进入if判断不到5到else执行 if (imgindex == olobj.children.length - 1) { console.log(olobj.children.length); //思路:1 从第五张切换到第六张(克隆的第一张) // 2 在运动函数的回调函数中,设置ul的left为0 // 效果就是要迅速切换到第一张图片. // 页面中不变的是12345按钮所以可以 var target = -olobj.children.length * imgW //实现第五张图片之后到克隆的那一张 var change = true //重新设置全局索引/下标为0重复轮播 imgindex = 0 } else { //8-2非最后一张图片 则向下一个进入 imgindex++ //key的属性值*图片的宽度等于图片的移动位置 //因为点右边要向左移动所以left var target = -imgindex * imgW; } //8-2.1 判断完之后获取图片的位置 //ulobj的移动显示图片位置 //{方向left 目标位置target} startMove(ulobj, { left: target }, function () { console.log('GG'); // change默认为false //当最后一张设置为true的时候为真则执行 left=0px 回到第一张 change && (ulobj.style.left = '0px') //10-2 当图片更换完成之后改为true可以点击 isclick = true }) selol(); } // 9 向左切换 上一张************** leftobj.onclick = function () { //点击之后为false则停止代码运行 if (!isclick) return; isclick = false if (imgindex == 0) { //当等于0的时候 克隆的第一张显示出来 //声明totelimglen 包括克隆 5 //获取所有的图片长度-2500,包括克隆的 //此时totelimglen=6 var totelimglen = ulobj.children.length; ulobj.style.left = -(totelimglen - 1) * imgW + 'px' //最大索引是长度-1 加上克隆的一张 所以需要-2 imgindex = totelimglen - 2 } else { imgindex--; } var target = -imgindex * imgW //图片宽度 imgW是不变的 变得是imgindex startMove(ulobj, { left: target }, function () { //继续左切换点击 isclick = true }) selol(); } //11 实现自动轮播 function autopleay() { timess = setInterval(function () { // rightobj.onclick是个对象可以直接调用 //只向右移动即可 rightobj.onclick() }, 2500) } autopleay() //封装一个运动函数 //(boxObj,{left:500,top:200}) function startMove(ele, obj, callback) { var onOff = false; clearInterval(times); times = setInterval(function () { // 遍历运动的方向和目标值 for (var attr in obj) { // 计算speed 需要目标值 实时位置 let tmpPos = parseInt(getPos(ele, attr)); var speed = (obj[attr] - tmpPos) / 10; // 对speed取整 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 判断是否到达目标值 if (obj[attr] == tmpPos) { onOff = true; } // 让元素动起来 ele.style[attr] = tmpPos + speed + 'px' } // 属性都运动完成清除定时器 if (onOff) { clearInterval(times); callback && callback() } }, 30) } function getPos(ele, attr) { // 获取的值,带有px if (ele.currentStyle) { return ele.currentStyle[attr]; } else { return getComputedStyle(ele)[attr]; } } </script>