原生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]);
  }
}

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

(0)

相关推荐

  • JS+CSS实现3D切割轮播图

    本文实例为大家分享了JS+CSS实现3D切割轮播图的具体代码,供大家参考,具体内容如下 第一步:我们首先要通过CSS来完成一个基本布局,利用 transform-style: preserve-3d设置成3D. 下面是CSS部分的代码 * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } /* 轮播图 */ .homePage { width: 800px; height: 200px; mar

  • 使用html+js+css 实现页面轮播图效果(实例讲解)

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=

  • JS+css3实现幻灯片轮播图

    本文实例为大家分享了JS+css3实现幻灯片轮播图的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; -webkit-touch-callout: none; -webkit-user-select: none;

  • 原生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 //生成轮播图 e

  • JavaScript实现简单轮播图效果

    本文实例为大家分享了js实现简单轮播图效果的具体代码,可以实现左右翻转,图片切换显示等效果,供大家参考,具体内容如下 效果展示: 代码展示: <!doctype html> <html> <!-- 学习功能:使用JavaScript实现图片轮播,左右翻转,图片切换显示等. author: lisa于2018-5-30 --> <title> <meta charset="utf-8"> </title> <b

  • 原生js实现简单轮播图效果

    本文实例为大家分享了js实现简单轮播图效果的具体代码,供大家参考,具体内容如下 效果如下: 分析: 分析效果: 分析实现: 1.通过 document.querySelector('.类名') 的形式获取到装轮播图的大盒子(.carousel).装轮播图左右按钮的标签的父元素(.chevron).获取左右按钮(.chevron-left ..chevron-right).获取放轮播图图片的父元素ul(.carousel-body)[注:这里获取ul而不是回去li,是因为移动轮播图的时候是整个ul

  • 原生javascript实现图片轮播切换效果

    本文实例为大家分享了javascript实现图片轮播切换效果的具体代码,供大家参考,具体内容如下 效果如下: 代码部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&

  • 原生js实现焦点轮播图效果

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图 2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index 3.间隔调用与无限轮播. 4.注意在动画时要停止按钮,或者说上一个动画完毕下一个动画才能执行 5.另外在切换图片的时候,底部的Button动画效果,是从底部开始往上升的,要用到transform:scale()和transform-origin:0 100%两个转换属性,代码如下 <!DOCTYPE html> <html&g

  • 原生js实现无缝轮播图效果

    话不多说,请看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝轮播图-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type="ima

  • JavaScript仿小米轮播图效果

    本文是自己仿写的小米轮播图的写法,通过透明度改变进行轮播的,新手,写的可能不是很好,有啥不合理的情况,望提出,指正,全部的代码放最下面 有很多写法重复,有空的时候,我把重复的代码封装一下 关于透明度渐变的动画效果 比如 delayOpacity(OliArray[pre],0,-0.1); 就是将OliArray[pre]这个对象的透明度转换成0,速度为0.1 function delayOpacity(obj,target,speed){ clearInterval(timer); timer

  • 原生js实现网易轮播图效果

    一.实现效果图 二.分析布局 主盒子里分上下两个小盒子(1和2). 包含图片的盒子占两张图片的宽(3),处于上盒子中,当前图片在上盒子(1)中,其它图片在盒子(3)的右侧等待播放. 下边的盒子(2)包括了六个小方块及定位在主盒子上的两个箭头. 三.html部分   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>wa

  • 原生js实现旋转木马轮播图效果

    话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转木马特效</title> <style type="text/css"> *{margin: 0;padding: 0;list-style:none;} #demo{width:1200px;mar

  • JavaScript实现简易轮播图最全代码解析(ES5)

    本文实例为大家分享了JavaScript实现简易轮播图效果的具体代码,供大家参考,具体内容如下 全部代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ES5轮播图</title> <style> * {padding: 0;margin: 0;} #wrapper { position: relative; margin: 5

随机推荐