精华内容
下载资源
问答
  • 层叠轮播图
    2021-03-13 19:35:20

    前言:
    已经一个月没有怎么更博了,一直在学习一些其他得。之前在网上看到一个层叠样式得轮播图,也是看过一个博主得内容以后自己又理清楚了思路才写出来。

    原文出处:https://www.cnblogs.com/iFangHuanrui/p/10584223.html

    正文:
    对于这类轮播图首先我们要先设置好每个需要轮播元素得位置,使得看上去相对得立体一点,那么下面我们来想一下,假设有5张图片需要轮播,图片得顺序从左到右一次排列,那么我们是不是需要将第一张和第五张对应起来,放在两边,第二张和第四章放在两边对应起来。第三张也就是当前展示得轮播图放到中间就可以了。效果如下:

    下面我们来看下代码:

    HTML:

        <div>
            <ul>
                <li class="show1">1</li>
                <li class="show2">2</li>
                <li class="show3">3</li>
                <li class="show4">4</li>
                <li class="show5">5</li>
                <!-- 切换按钮 -->
                <div class="cut1"></div>
                <div class="cut2"></div>
            </ul>
        </div>
    

    CSS:

    	  div{
                width: 1200px;
                height: 800px;
                margin:150px auto;
                background:pink;
            }
            ul{
                position:relative;
                width: 100%;
                height: 100%;
                transform:rotateX(-20deg);
            }
            li{
                position:absolute;
                list-style:none;
                height: 350px;
                font-size:64px;
                transition: all .3s;
               
            }
            .show1{
                width:400px;
                top: 20px;
                left:0px;
                opacity:0.2;
                z-index:1;
                background:yellow;
            }
            .show5{
                width: 400px;
                left:750px;
                top: 20px;
                opacity:0.2;
                z-index:1;
                background:aqua; 
            }
            .show2{
                width: 600px;
                left:0px;
                top:70px;
                opacity:.7;
                z-index:2;
                background:orange;
            }
            .show4{
                width: 600px;
                left:600px;
                top:70px;
                opacity:.7;
                z-index:2;
                background:gold; 
            }
            .show3{
                width: 800px;
                left:180px;
                top:100px;
                z-index:3;
                opacity:1;
                background: hotpink;
            }
            .cut1{
                position:absolute;
                z-index:99;
                font-size: 30px;
                left:0;
                top:0;
                width: 50px;
                height: 70px;
                text-align:center;
                line-height:70px;
                background:gray;
            }
            .cut2{
                position:absolute;
                z-index:99;
                font-size: 30px;
                right:39px;
                top:0;
                width: 50px;
                height: 70px;
                text-align:center;
                line-height:70px;
                background:gray;
            }
    

    这些基本要求实现后,我们来看下核心部分怎么实现,大家想一下,假设我们得5张图片 1 2 3 4 5按顺序从左到右排放整齐,轮播图得整体效果是向右走的,目前显示得是第一张,那么接下来是不是需要显示第二张,那么如何显示第二张呢,是不是需要把第一张图片放到尾部,这样第二张图片就显示出来了。

    那么现在得图片得顺序是不是 2 3 4 5 1,这时候我们想要轮播图向左移动一张,是不是说想要显示第一张图片,那么这个时候我们是不是只需要把最后一个元素1,移动到头部就行了呢,这样顺序就变成了1 2 3 4 5

    有了以上得思路我们先实现一下自动轮播得效果:

    JS:

    // 获取变量名称
       var ul = document.querySelector('ul');
       var li = document.querySelectorAll("li");
       var name1 = ["show1","show2","show3","show4","show5"];//name-style
       var cut1 = document.querySelector('.cut1'); //cut1
       var cut2 = document.querySelector('.cut2'); //cut2
     timer = setInterval(function(){
         // 把开头的元素放到最后
         console.log("11");
         var first = name1.shift(); //获取第一个元素
         name1.push(first);//追加到数组尾部
         for(var i=0;i<li.length;i++){
             li[i].className = name1[i];
         }
     },3000);
    

    这里就是按照上面得思路写出来得自动轮播效果。注意这里把我们上面调整得每个元素得样式复制到数组中,然后給修改每个轮播得元素得样式,也就是把name1数组得样式赋值給轮播得元素

    那么大家在想一下左右切换,左切换就是说把最后一个元素移动到头部,而右切换呢,就是把第一个元素移动到尾部
    代码:

     // 左点击切换
     cut1.onclick = function(){
          clearInterval(timer); //鼠标点击切换时轮播中断
          // 把数组中最后一个元素提到前面
          var last = name1.pop();  //删除并返回最后一个元素
          name1.unshift(last); //添加到数组头部
          for(var i=0;i<li.length;i++){
              li[i].className = name1[i];
          	}
       }
     // 右点击切换
     cut2.onclick = function(){
         clearInterval(timer); //鼠标点击切换时轮播中断
         console.log("轮播停止");
         var first = name1.shift(); //获取第一个元素
         name1.push(first);//追加到数组尾部
         for(var i=0;i<li.length;i++){
             li[i].className = name1[i];
         }
     }
    

    那么我们点击切换后,由于清除了该定时器,就会导致点击后自动轮播效果中断,所以我们需要在按钮得鼠标离开事件中再重新启动轮播图,这样就可以实现鼠标点击后继续轮播了

      // 鼠标离开是继续轮播
            cut2.onmouseout = function(){
                console.log("鼠标离开");
               timer =  setInterval(function(){
                    console.log("轮播继续");
                // 把开头的元素放到最后
                console.log("11");
                var first = name1.shift(); //获取第一个元素
                name1.push(first);//追加到数组尾部
                for(var i=0;i<li.length;i++){
                    li[i].className = name1[i];
                }
              },3000);
            }
             // 鼠标离开是继续轮播
             cut1.onmouseout = function(){
                console.log("鼠标离开");
               timer =  setInterval(function(){
                    console.log("轮播继续");
                // 把开头的元素放到最后
                console.log("11");
                var first = name1.shift(); //获取第一个元素
                name1.push(first);//追加到数组尾部
                for(var i=0;i<li.length;i++){
                    li[i].className = name1[i];
                }
              },3000);
            }
    
    

    好了,答主本期得分享就到这里。欢迎大家指正与评论!!

    更多相关内容
  • 主要为大家详细介绍了微信小程序使用swiper组件实现层叠轮播图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序 swiper 组件实现层叠轮播图,同时自定义指示点样式和图片描述信息
  • js 层叠轮播图

    2019-03-18 10:35:45
    层叠轮播图/
  • 3D层叠轮播图(原生js,兼容ie9及以上,可用于vue和react项目)
  • 主要为大家详细介绍了原生js实现图片层叠轮播切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了原生JS层叠轮播图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • jQuery三张图片层叠轮播代码是一款3D图片金字塔布局图片切换特效下载。
  • 微信小程序使用Swiper组件实现层叠轮播图

    本篇代码照搬自网友,见链接。

    搭建静态资源服务器

    1. 全局安装serve:npm install -g serve
    2. 在任何你想的地方新建文件夹:resources。resources下新建文件夹:images,用于存放静态图片资源;resources下新建文件夹:videos,用于存放视频文件;resources下新建文件夹:audios,用于存放音频文件。
    3. 启动服务器:serve resources

    小程序项目

    代码涉及的主要文件有:

    1. index.wxml
    2. index.wxss
    3. index.js

    在这里插入图片描述

    index.wxml

    <swiper previous-margin='200rpx' next-margin='200rpx' bindchange="swiperChange" style='height:{{swiperH}}'  circular>
      <swiper-item wx:for='{{imgList}}' wx:key='{{index}}'>
        <image class='le-img {{nowIdx==index?"le-active":""}}' bindload='getHeight' src='{{item}}' style='height:{{swiperH}};'></image>
      </swiper-item>
    </swiper>
    

    index.wxss

    .le-img {
      width: 100%;
      display: block;
      transform: scale(0.8);
      transition: all 0.3s ease;
      border-radius: 6px;
      box-shadow: 0 0 6rpx rgba(50, 50, 50, 0.4);
      -webkit-filter: blur(2rpx);
      -moz-filter: blur(2rpx);
      -ms-filter: blur(2rpx);
      -o-filter: blur(2rpx);
      filter: blur(2rpx);
    }
    .le-img.le-active {
      transform: scale(1);
      box-shadow: none;
      -webkit-filter: blur(0);
      -moz-filter: blur(0);
      -ms-filter: blur(0);
      -o-filter: blur(0);
      filter: blur(0);
    }
    

    index.js

    Page({
      data: {
        swiperH:'',
        nowIdx:0,
        imgList:[
          'http://localhost:3000/images/j1.jpg',
          'http://localhost:3000/images/j2.jpg',
          'http://localhost:3000/images/j3.jpg',
          'http://localhost:3000/images/j4.jpg',
          'http://localhost:3000/images/j5.jpg',
          'http://localhost:3000/images/j3.jpg'
        ]
      },
      //获取swiper高度
      getHeight:function(e){
        var winWid = wx.getSystemInfoSync().windowWidth - 2*100;//获取当前屏幕的宽度
        var imgh = e.detail.height;//图片高度
        var imgw = e.detail.width;
        var sH = winWid * imgh / imgw + "px"
        this.setData({
          swiperH: sH
        })
      },
      //swiper滑动事件
      swiperChange:function(e){
        this.setData({
          nowIdx: e.detail.current
        })
      }
    })
    

    相关链接

    微信小程序使用swiper组件实现层叠轮播图
    轮播图的实现
    微信小程序之实现层叠轮播图的效果案例

    展开全文
  • 推荐uview ui框架 有自带的3D轮播图效果 https://www.uviewui.com/components/swiper.html 如果是原生的小程序开发的话 那么你可以使用 swiper 原生组件的 这两个属性。加上让中间的swiper-item 中的图片定位居中...

    如果你的项目使用的是jquery的话

    推荐使用swiper 进行做
    https://www.swiper.com.cn/usage/index.html

    如果用的是vue3开发的纯h5项目的话,推荐 swiper/vue 版本 之前的博客地址

    https://blog.csdn.net/yunchong_zhao/article/details/120970625?spm=1001.2014.3001.5501

    如果是vue2版本的开发的h5的话

    推荐那个 vue-awesome-swiper
    https://github.surmon.me/vue-awesome-swiper/

    你的小程序是基于uniapp + vue2版本的话。 推荐uview ui框架 有自带的3D轮播图效果

    https://www.uviewui.com/components/swiper.html
    在这里插入图片描述

    如果是原生的小程序开发的话

    那么你可以使用 swiper 原生组件的
    在这里插入图片描述
    这两个属性。加上让中间的swiper-item 中的图片定位居中显示
    然后 通过transform scale 中间的那个放大。就实现层叠效果
    这应该比你写一个快很多

    以上就是一些总结呢,因为工作中。让你自己写的话 太浪费时间了。

    关注我 持续更新 前端知识。

    展开全文
  • vue项目+js 实现层叠轮播图——基础积累

    好久没有写文章了,堕落了。前一段时间在写官网,遇到一个需求:效果图如下:
    在这里插入图片描述
    就是实现一个层叠轮播图。

    我之前是通过elementUi中的走马灯组件来实现的,博文链接:
    elementUi中的走马灯组件实现层叠轮播图:https://app.mockplus.cn/app/Im3IwiE5w8_5/comment/design/yIadWLR_ty1

    但是效果不咋好:

    1. 切换效果不好

    在这里插入图片描述

    2.移动端适配不好

    在这里插入图片描述
    最终我从网上找到了下面的解决办法,基本上就是手写了一个轮播图组件,但是由于我js比较差,直接找了个相似的改了改,效果还不错。

    直接上代码:

    1.组件代码——carouseComp.vue(自定义的名字哈)

    <template>
      <div class="carousel" ref="carousel">
        <a-tabs
          :activeKey="currentIndex"
          :animated="false"
          @change="tabChange"
          @keydown.native.capture.stop.prevent
        >
          <a-tab-pane
            v-for="(tab, index) in bannerTabList"
            :key="index"
            :tab="tab"
          ></a-tab-pane>
        </a-tabs>
        <div class="whole">
          <div class="roll-img">
            <span class="last" @click="after" v-show="showIndex">
              <a-icon type="left" />
            </span>
            <!-- 图片容器 -->
            <ul id="ul">
              <li
                v-on:click="change($event)"
                v-for="(item, index) in bannerImgList"
                :key="item"
                :class="classes[index]"
              >
                <img :src="item" alt="" />
                <div>
                  <h2>{{ bannerTextList[index].title }}</h2>
                  <div>
                    {{ bannerTextList[index].text1 }}
                  </div>
                  <div>
                    {{ bannerTextList[index].text2 }}
                  </div>
                </div>
              </li>
            </ul>
            <span class="next" @click="before" v-show="showIndex">
              <a-icon type="right" />
            </span>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data: function() {
        return {
          showIndex: true, // 是否显示左右按钮
          classes: ['left', 'center', 'right', 'after1', 'after2'],
          timer: null,
          bannerTabList: ['新能源', '电子通讯', '汽车射频', '医疗电子', '智能穿戴'],
          currentIndex: 0,
          bannerImgList: [
            require('@/assets/img/banner/5.png'),
            require('@/assets/img/banner/1.png'),
            require('@/assets/img/banner/2.png'),
            require('@/assets/img/banner/3.png'),
            require('@/assets/img/banner/4.png'),
          ],
          bannerTextList: [
            {
              title: '智能穿戴',
              text1: '应用穿戴式技术对日常穿戴进行智能化功能场景应用,',
              text2: '支持手表、手环、眼镜等智能穿戴设备线路板生产。',
            },
            {
              title: '新能源',
              text1: '坚持贯彻能源可持续发展战略,',
              text2: '不断研发新能源设备线路板的生产能力及认证资质。',
            },
            {
              title: '电子通讯',
              text1: '高精技术融合通讯多样化需求发展,',
              text2: '满足通讯行业设备日益更新的生产研发需求。',
            },
            {
              title: '汽车射频',
              text1: '符合车规生产标准,助力数字化智能出行,',
              text2: '提升汽车实用场景智能化及多交互驾车体验。',
            },
            {
              title: '医疗电子',
              text1: '从医疗久远设备到家庭小健康检测终端,',
              text2: '智能制造助力,牢筑医疗设备安全底线。',
            },
          ],
        };
      },
      methods: {
        tabChange(val) {
          clearInterval(this.timer);
          let last = null;
          let first = null;
          if (this.currentIndex < val) {
            for (let i = 0; i < val - this.currentIndex; i++) {
              last = this.classes.pop();
              this.classes.unshift(last);
            }
          } else if (this.currentIndex > val) {
            for (let i = 0; i < this.currentIndex - val; i++) {
              first = this.classes.shift();
              this.classes.push(first);
            }
          }
          setTimeout(() => {
            this.currentIndex = val;
          }, 200);
        },
        before() {
          let last = this.classes.pop();
          this.classes.unshift(last);
          this.currentIndex = this.currentIndex < 4 ? this.currentIndex + 1 : 0;
        },
        after() {
          let first = this.classes.shift();
          this.classes.push(first);
          this.currentIndex =
            this.currentIndex > 0
              ? this.currentIndex - 1
              : this.currentIndex + 5 - 1;
        },
        change(e) {
          if (e.target.parentNode.classList.contains('left')) {
            this.after();
          } else if (e.target.parentNode.classList.contains('right')) {
            this.before();
          } else {
            return false;
          }
        },
      },
      mounted() {
        this.$nextTick(() => {
          var that = this;
          this.$refs.carousel.addEventListener('mouseover', function() {
            clearInterval(that.timer);
          });
          this.$refs.carousel.addEventListener('mouseout', function() {
            that.timer = setInterval(() => {
              that.before();
            }, 3000);
          });
          this.timer = setInterval(() => {
            this.before();
          }, 3000);
        });
      },
      beforeDestroy() {
        clearInterval(this.timer);
      },
    };
    </script>
    <style lang="less" scoped>
    ul,
    li {
      list-style: none;
    }
    .carousel {
      width: 100%;
      height: 600px;
      .whole {
        width: 853px;
        height: 100%;
        margin: 0 auto;
        .roll-img {
          width: 100%;
          height: 100%;
          position: relative;
          transform-style: preserve-3d;
          ul li {
            position: absolute;
            width: 100%;
            height: 100%;
            cursor: pointer;
            & > div {
              position: absolute;
              left: 90px;
              top: 96px;
              color: #fff;
              z-index: 2;
              h2 {
                font-size: 30px;
                font-weight: 700;
                text-align: left;
                color: #ffffff;
                line-height: 32px;
                margin-bottom: 24px;
              }
              div {
                height: 30px;
                font-size: 18px;
                font-weight: 400;
                text-align: left;
                color: #ffffff;
              }
              &:hover {
                font-weight: normal;
              }
            }
          }
        }
      }
    }
    img {
      width: 100%;
      height: 100%;
    }
    
    .left {
      left: -870px;
      transform: scale(0.8);
      z-index: 4;
      transition: all 0.5s ease;
    }
    .center {
      z-index: 6;
      left: 0;
      top: 0;
      bottom: 10%;
      transition: all 0.5s ease;
    }
    .right {
      left: 870px;
      transform: scale(0.8);
      z-index: 4;
      transition: all 0.5s ease;
    }
    .left > div,
    .right > div {
      z-index: 5;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      transition: all 0.3s ease;
    }
    .after1,
    .after2,
    .after3 {
      z-index: 3;
      left: 0;
      top: 0;
      visibility: hidden;
      transform: scale(0);
    }
    .last,
    .next {
      position: absolute;
      z-index: 10;
      width: 36px;
      height: 36px;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      line-height: 36px;
      cursor: pointer;
      top: 45%;
      background: #eaeaea;
      color: #999999;
      &:hover {
        background: #3a5fc9;
        color: #fff;
      }
    }
    .list {
      width: 30%;
      height: 5px;
      display: flex;
      margin: 0 auto;
      margin-top: 20px;
    }
    .btn {
      transition: all 0.3s ease;
      flex: 1;
      background: rgb(244, 244, 244);
    }
    .btn:not(:first-child) {
      margin-left: 20px;
    }
    .last {
      left: -70px;
    }
    .next {
      right: -70px;
    }
    // 指示灯
    .btn.active {
      background: #f00;
    }
    </style>
    
    

    2.组件的使用

    2.1 组件的引用

    import carouseComp from './modules/carouseComp.vue';
    

    2.2 组件的注册

    export defautl{
    	components:{carouseComp}
    }
    

    3.组件的使用

    <carouseComp style="width:100%;height:600px;"></carouseComp>
    

    完成。

    当前组件只适用于5张图片的轮播,如果要适配其他数量的图片,则需要添加 图片路径和class类名,否则组件会报错。

    功能实现!!!

    展开全文
  • 轮播图实现方法一——层叠轮播图

    千次阅读 2020-06-22 11:34:34
    轮播图的实现方法有很多种,在此主要介绍一种层叠轮播图的实现方式 主要原理:将所有轮播图照片放在同一层,相互覆盖,通过JS控制当前那一张活跃在最顶端,实现图片轮播。 具体实现如下: HTML部分 <!--轮播图...
  • vue+elementUi——实现层叠轮播图——技能提升
  • jQuery制作漂亮的层叠轮播图

    千次阅读 2019-04-18 19:21:32
    使用jQuery,HTML5,CSS3制作一个中间最大,两端逐渐变淡、变小的轮播图
  • 3d轮播图 uniapp实现3D轮播图 从uniapp插件市场下载插件:https://ext.dcloud.net.cn/plugin?id=243#detail 操作步骤 导入插件 <script> import currySwiper from "@/components/curry-swiper/curry-...
  • Vue 上下层叠轮播图

    2022-03-04 16:59:45
    1.效果: 2.代码: <template> <div class="article-main" @mouseover='mouseOver()' @mouseleave="mouseLeave()"> ...img src="../../assets/a3.jpeg" :class="v1" />...img src="../../assets/a2.jpeg...
  • 好久没写博客了,最近这项目中有个叠式轮播的需求 在网上找了一堆 都没有自己想要的 最开始被 TaroUI和小程序 自带的swiper困扰 一直以为是swpier的升级版 试了好久 也没改造成功 干脆自己写一个吧! 上个最终...
  • 所以自己写了一个层叠轮播组件;现在分享给大家; 主要技术栈是vue.js ;javascript;jquery;确定实现思路因工作繁忙,暂时不做梳理了;直接贴代码参考; 此组件是基于jquer封装,在vue项目中使用首先需要先安装...
  • 使用jQuery三张图片层叠轮播
  • // currentPage切换,整体dom进行变化,把第一层滑动置最低 this.$nextTick(() => { this.temporaryData.poswidth = 0; this.temporaryData.posheight = 0; this.temporaryData.opacity = 1; ...
  • 简单的jquery层叠图片滚动轮播切换效果代码,带按钮的滚动轮播图
  • 原生JS层叠图片轮播展示代码是一款适合展示的旋转木马图片代码。
  • 微信小程序--层叠轮播图

    千次阅读 2020-12-07 19:39:40
    效果展示 Demo代码 wxml <view class="selection_cards" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend"> <view class="selection_cards_item" wx:for="{{list}}" wx:...
  • jQuery带箭头图片层叠轮播切换代码是一款带有左右箭头切换,文字描述可以隐藏显示。
  • }, /*层叠轮播图初始化*/ init: function () { let _this = this; wx.getSystemInfo({ success(res) { //获取屏幕的宽成功 let arr = []; let len = _this.data.cardNumber; let cardWidth = res.screenWidth / 750...
  • swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好。 由于简单这里当然就不会去详细介绍了,下面就来开始本文的正文内容 实现过程: 一.移动端-需求swiper 4.0.3实现层叠轮播 ...
  • <template> <div> <transition name="fade"> <div @touchend='end' @touchstart='start' @touchmove='move' class="swiper">...div @click="chooseItem(item,index)" v-for="(item, index) ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,769
精华内容 3,107
关键字:

层叠轮播图

友情链接: qaibao_v47.zip