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

这篇文章主要为大家详细介绍了原生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]);  }}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持趣讯吧。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至 55@qq.com 举报,一经查实,本站将立刻删除。转转请注明出处:https://www.szhjjp.com/n/14177.html

(0)
nan
上一篇 2021-08-17
下一篇 2021-08-17

相关推荐

  • 美文摘抄句子(美文美段摘抄大全)

    一、无论人生上到哪一层台阶,阶下有人在仰望你,阶上亦有人在俯视你,你抬头自卑,低头自得,唯有平视,才能看见真实的自己。二、自由不是想干什么就干什么,而是不想干什么,就有能力不干什么。三、不要以为喝矿泉水的都是没钱的,不要以为不写作业的都是坏学生

    2022-01-14
    0
  • 摘抄150字优美的好句(精选优美短句摘抄150字)

    一、世界是美丽的,而世界也是有缺憾的;生活是美丽的,可生活同样有缺憾。因为美丽,才值得我们来这个世界走一回;因为缺憾,才需要我们去弥补。既然抱怨同样无事于补,那就尽量少一点抱怨或者不抱怨,让幸福离自己近一点,多一点!二、你尊重别人,别人也会尊重你

    2022-01-14 热点头条
    0
  • 苹果手机13配置参数详情(iPhone13性价比如何)

    摘要:苹果13延续了12的直面边框设计,正反两面都是平面设计。刘海面积有着明显的缩小,进一步提升屏占比。13系列的屏幕依旧为OLED,电池容量有明显的提升,但依旧会保持最高20W的充电功率。13还会全系搭载苹果A15芯片.

    2023-04-14
    0
  • win10玩不了wow解决方法

    《魔兽世界》正在风靡全世界,很多玩家为了更好的玩这个游戏都选择了更新win10系统,但是升级后有不少玩家都出现了,所以下面就给你们带来win10不能玩的问题。

    2021-08-18 热点头条
    0
  • 于月仙生前有多少资产?于月仙留下多少遗产?于月仙的遗产归谁

    于月仙车祸逝世,留下几遗产,隐私没有发布之前,不能乱说。这能够肯定的是她的遗产必需依照《继承法》规则的次第和规范停止分割继承,这一点无可质疑。

    2021-08-26
    0
  • 2022全国两会开始时间和结束时间具体什么时候召开什么时候结束

    2022全国两会开始时间和结束时间2021年12月4日,十三届全国人大常委会第三十二次会议表决通过了全国人大常委会关于召开十三届全国人大五次会议的决定。决定表示十三届全国人大五次会议于2022年3月5日在北京召开。建议全国政协十三届五次会议于2022

    2022-01-14
    0

发表回复

登录后才能评论