• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了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]);
  }
}

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
React Native 启动流程详细解析发布时间:2022-02-05
下一篇:
uniapp项目优化方式及建议发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap