如何用原生javascript+CSS实现轮播图效果

本篇内容介绍了“如何用原生javascript+CSS实现轮播图效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

本文实例为大家分享了javascript+CSS实现轮播图效果的具体代码，供大家参考，具体内容如下

1.html

<ul id="banner" ></ul>

2.css

ul{     list-style:none;     position: absolute;     padding: 0;     left: 0;     right: 0;     bottom: 0;     top:0;     margin:auto;     width: 800px;     height:200px; }

3.js

//生成轮播图 export function generateBanner(){   let sz = new Array();   let cur_ul = document.getElementById('banner');   const recommends = this.recommends;   let timer = setInterval(getNextLi, 3000);   //生成轮播图li   for (let i = 0; i < recommends.length; i++) {     //生成标签     let cur_li = document.createElement("li");     let cur_img = document.createElement("img");     //追加属性     cur_img.src = recommends[i].pic;     //追加样式     cur_li.style.position = 'absolute';     cur_li.style.left = '0px';     cur_li.style.transitionDuration = '0.4s';     cur_li.style.cursor="pointer";     //ul总宽800 ，显示一张完整的400px 两张不完整的200px     cur_img.style.width = '125px';     cur_img.style.height = "100px";     //追加子元素     cur_li.appendChild(cur_img);     cur_ul.appendChild(cur_li);     //全部放入数组好操作     sz.push(cur_li);   }   //生成两个图标   generateAngleIcons();   //将最后三张图片用来显示   let len = sz.length - 1;   //倒数第三张   showThreeLi();   //获取下一个li显示，将第一个放到数组最后   function getNextLi() {     const li = sz[0];     sz = sz.slice(1);     sz.push(li);     //所有li还原     for (let i = 0; i < sz.length; i++) {       //li全部还原成原始大小       sz[i].style.transform = "scale(1)";       sz[i].style.left = "0px";       //从小到大li依此覆盖       sz[i].style.zIndex = i;       //全部隐藏       sz[i].style.display = "none";     }     //显示最后三张     showThreeLi();   }   //显示最后三张   function showThreeLi() {     sz[len - 2].style.left = "0px";     //倒数第二张     sz[len - 1].style.left = "120px";     sz[len - 1].style.zIndex = 100;     sz[len - 1].style.transform = "scale(1.3)";     //倒数第一张     sz[len].style.left = "230px";     //显示     sz[len - 2].style.display = "block";     sz[len - 1].style.display = "block";     sz[len].style.display = "block";   }   function generateAngleIcons(){     const icons = new Array();     for (let i = 0; i < 2; i++) {       //生成图标li       let cur_li = document.createElement("li");       //追加样式       cur_li.style.position = 'absolute';       cur_li.style.top = '0px';       cur_li.style.bottom = '0px';       cur_li.style.margin = "auto";       cur_li.style.paddingTop="100px";       cur_li.style.paddingBottom="100px";       cur_li.style.zIndex = 20;       icons.push(cur_li);     }     icons[0].style.left = '0px';     icons[1].style.right = '0px';     icons[0].innerHTML = '<i class="angle left icon"></i>'     icons[1].innerHTML = '<i class="angle right icon"></i>'     cur_ul.appendChild(icons[1]);     cur_ul.appendChild(icons[0]);   } }

“如何用原生javascript+CSS实现轮播图效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！