许久不更新了，今天做一个网易云的轮播图，就像下面这样
先二话不多说，贴上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网易云轮播图</title> </head> <style> body,ul{ margin: 0; } ul{ position: relative; padding-left: 0; width: 100%; height: 100%; overflow: hidden; } li{ position: absolute; list-style: none; width: 730px; height: 336px; transition: 0.5s; } img{ display: block; } .carousel{ width: 1200px; height: 367px; margin: 80px auto; } .imgBox{ width: 1200px; height: 336px; } .lineBar{ width: 1200px; height: 31px; text-align: center; } .list1{ z-index: 1; transform: scale(0.81); transform-origin: 0% 100%; } .list2{ transform: translateX(235px); z-index: 2; } .list3{ transform: translateX(730px) scale(0.81); z-index: 1; transform-origin: 100% 100%; } .list4{ transform: translateX(965px) scale(0.81); transform-origin: 100% 100%; } .list5{ transform: translateX(1200px) scale(0.81); transform-origin: 100% 100%; } .list6{ transform: translateX(1435px) scale(0.81); transform-origin: 100% 100%; } span{ display: inline-block; width: 35px; height: 3px; background-color: #ccc; } </style> <body> <div class="carousel"> <div class="imgBox"> <ul> <li class="list1"><img src="网易云轮播图/01.jpg" alt=""></li> <li class="list2"><img src="网易云轮播图/02.jpg" alt=""></li> <li class="list3"><img src="网易云轮播图/03.jpg" alt=""></li> <li class="list4"><img src="网易云轮播图/04.jpg" alt=""></li> <li class="list5"><img src="网易云轮播图/05.png" alt=""></li> <li class="list6"><img src="网易云轮播图/06.jpg" alt=""></li> </ul> </div> <div class="lineBar"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <script> var aLi = document.querySelectorAll("li"); var aSpan = document.querySelectorAll("span"); var oImgbox = document.querySelector(".imgBox"); var aName = []; //存放元素的名字 var index = 0;//初始状态下第几个按钮变色 setColor(); for(var item of aLi){ //console.log(item.classList[0]); aName.push(item.classList[0]); } function nextPic() { //向下翻页 aName.unshift(aName[5]); //把数组最后一个值复制并插入到数组第一个位置 aName.pop(); //删除数组的最后一个元素 for (var i=0,len=aLi.length;i<len;i++){ //预存数组长度，减少循环语句的性能消耗 aLi[i].setAttribute("class",aName[i]); //重新给每个元素设置新的名字 } index++; if(index>5)index=0; setColor(); } function prePic() { aName.push(aName[0]); //把数组第一个值复制并插入到数组最后一个位置 aName.shift();//删除第一个 for (var i=0,len=aLi.length;i<len;i++){ //预存数组长度，减少循环语句的性能消耗 aLi[i].setAttribute("class",aName[i]); //重新给每个元素设置新的名字 } index--; if(index<0)index=5; setColor(); } function setColor() { for(var item of aSpan){ item.style.backgroundColor="#ccc"; } aSpan[index].style.backgroundColor = "#45c17c"; } var eleList=["list1","list3"]; var eleAct=["prePic","nextPic"]; oImgbox.addEventListener("click",function (ev) { ev=ev||window.event;//兼容性处理 console.log(ev.target.parentNode);//鼠标事件 var ele = ev.target.parentNode;//点中的li元素 var eleName=ele.classList[0];//获取元素的名字 /* switch (ele.classList[0]){ case "list1": prePic();//向上翻页 break; case "list3": nextPic();//向下翻页 break; } */ window[eleAct[eleList.indexOf(eleName)]](); }) </script> </body> </html> 实现效果如下：
制作步骤详解：
1.首先就是量尺寸的问题，尺寸可以用PxCook进行量
2.就是图片的尺寸问题，这里量出的尺寸都是730*336的，然而去哪找这些刚好合适的图片，就显得很棘手了。在这里，我建议可以先找好素材，然后比例要差不多（不然裁出来会很难看），然后通过Photoshop进行裁剪。具体步骤也给大家列出来吧：
我这里是PS2015，首先先找到一张尺寸和自己预想的差不多的图片，然后
在图像选择栏中选择画布大小这个选项，就会出现以下的框框：
这里宽高就调成自己想要的宽高就行，然后剪裁是根据定位来剪裁，现在的定位是靠中间剪裁。然后将所有图片剪裁完成之后就可以继续了。
3.网易云轮播图的实现思路，我是根据这个教学视频来实现的，请参考具体链接。
文章来源: 原生H5实现网易云轮播图