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

全屏切换展示效果

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

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

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

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

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

jQuery仿百度图片浏览效果

 jQuery仿百度图片浏览效果
  幻灯片和轮播图
 38414  357

3D轮播幻灯片

 支持多种3D轮播切换特效
  幻灯片和轮播图
 49812  656

迅雷首页官网多图焦点图特效

 模拟迅雷首页的幻灯片切换效果
  幻灯片和轮播图
 39609  355

swiper横向轮播

 swiper横向轮播，简单好用
  幻灯片和轮播图
 86884  573

讨论这个项目（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
        是的
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复