UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

全屏切换展示效果

所属分类：媒体,UI-幻灯片和轮播图,滚动

 38611  411  查看评论 (18)
分享到微信朋友圈
X
全屏切换展示效果 ie兼容12
 查看演示  立即下载

注：背景液态过渡效果只支持webkit内核,需要在服务端运行才可以看到效果

如需要改变背景，请修改index.js中第15行

this.images = [
    'b1.jpg',
    'b2.jpg',
    'b3.jpg'];
相关插件-幻灯片和轮播图,滚动
查看更多

简单实用的全屏轮播

 有多重选项，配置迅速，十分实用
  幻灯片和轮播图
 45041  382

简洁优雅，与众不同的轮播图插件

 代码简洁优雅，与其他插件不同，包括各样式轮播图
  幻灯片和轮播图
 31152  402

全屏无缝滚动加透明遮罩效果

 全屏滚动JS 带有遮罩效果
  幻灯片和轮播图
 36126  414

基于swipe全屏轮播图支持手势切换

 基于swiper的全屏轮播图，自适应网页大小，支持移动端触屏切换
  幻灯片和轮播图
 26285  296

讨论这个项目（18）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    FourLeafClover 0
    2019/7/25 14:41:32
    请问一哈有四块轮播怎么加。demo里面只有三块。
        西瓜1
        2019/7/25 15:11:34

        3个位置添加
        index.html中93行加主图展示html内容

        <div class="slide js-slide">
    <div class="slide__content">
      <figure class="slide__img js-slide__img">
        <img src="https://picsum.photos/760/1139?image=204">
      </figure>
       <figure class="slide__img js-slide__img">
        <img src="https://picsum.photos/760/1139?image=206">
      </figure>
    </div>
</div>

        index.html中大概位置（118行）加右侧标识04

        <div class="slider-bullet js-slider-bullet">
      <span class="slider-bullet__text js-slider-bullet__text">04</span>
      <span class="slider-bullet__line js-slider-bullet__line"></span>
</div>

        加了以上两个就可以了，此时如果要第4个背景也改变需要在index.js中15行加入对应图片，现在是3个

        this.images = [
    'b1.jpg',
    'b2.jpg',
    'b3.jpg'];
    回复
    Ray 0
    2019/7/24 16:44:27
    怎么得币？？？？ 回复
    没有壳的乌龟 0
    2019/4/24 9:20:45
    背景图片出不来
        ~?耦戚落汨0
        2021/1/22 14:00:26
        背景图片需要放到服务器才能出来
    回复
    Heartack 0
    2019/3/29 14:12:23
    很酷炫。。。。。 回复
    ° 映天红っ 0
    2019/3/25 10:10:46
    怎么得币？？？？ 回复
    null 0
    2019/3/15 15:52:40
    呃....币怎么得
        null0
        2019/3/15 15:53:14
        - - 回答问题？
    回复
    ????????? 0
    2019/3/2 15:22:32
    水经验了！！！
        null0
        2019/3/15 15:54:36
        怎么分享使用方法呢？求解答
        9780686460
        2022/8/7 14:57:27
        针不戳
        锾と空0
        2024/9/10 16:07:46
        我也来水一下
    回复
    唯笑 0
    2018/11/9 17:12:28
    这个为啥IE都滚不动啊，只是说了背景液态滚动效果只支持谷歌核心的吧 回复
    好运随身 0
    2018/11/5 19:49:53
    heiren 0
    2018/11/5 11:50:49
    背景图是怎么搞的，
        Dave Krinsky0
        2018/12/13 0:28:03
        背景是读取切换的第一张图。
        ?????????0
        2019/3/2 15:03:48
        是的
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复