图片全屏自适应轮播

所属分类:UI,媒体-背景,幻灯片和轮播图

 71932  459  查看评论 (23)
分享到微信朋友圈
X
图片全屏自适应轮播 ie兼容6

调用方法

引入JS文件

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/fullplay.js"></script>

HTML文件

<div id="bodyPage">
      <img src="images/bg1.jpg" class="bg">
      <img src="images/bg2.jpg" class="bg">
      <img src="images/bg3.jpg" class="bg">
</div>

注意 每张img图片都要加 class="bg"

CSS

#bodyPage{ width:100%; min-height:100%; height:auto !important; height:100%; position:fixed; top:0; left:0; }
img.bg { position:absolute; top: 0px; left: 0px; z-index:1; display:none;}

调用方法

$("#bodyPage").fullImages({
   ImgWidth: 1920, 
   ImgHeight: 980,
   autoplay :  3500,
   fadeTime : 1500
});

说明:

  • ImgWidth : 1920  图片的宽度 

  • ImgHeight: 980   图片的高度

  • autoplay : 3500  幻灯片自动播放时间

  • fadeTime : 1500  图片淡入时间


相关插件-背景,幻灯片和轮播图

JavriptDesktop

一个漂亮的原生Javript桌面效果
  背景
 64136  506

jquery固定标题控制插件Midnight.js

midnight.js是在页面滚动时控制多标题设计的开关jQuery插件,所以对应下面的内容你总能看到一个标题。
  背景
 41542  532

jQuery全屏背景插件Vegas2

网页全屏背景jQuery插件 Vegas2,它和其它背景插件不同之处就是带有幻灯片功能。幻灯片的切换有多种风格,如旋转、渐隐、左右等方式,切换的时候还有进度条显示。
  背景
 41269  493

jQuery颜色选择器ColorPicker

ColorPicker基于强大的jQuery,使用方便、配置简单,同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中,兼容各大浏览器。
  背景
 68631  335

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

    你跟谁俩呢 0
    2022/2/10 15:11:53
    牛啊 Ie7 下的轮播找了好多 这个好使 回复
    哟呵 0
    2019/8/12 13:08:02
    不想全屏怎么改 回复
    小朱快跑啊 0
    2019/3/30 21:13:35
    为什么我在下加其他div,也跟着轮播
    回复
    阳大大 0
    2018/11/6 9:50:08
    怎么在这个基础上插入文字等 回复
    BeNlz.. 0
    2018/9/17 19:56:11
    $("#bodyPage").fullImages({
      ImgWidth: 1920, 
      ImgHeight: 980,
      autoplay :  3500,
      fadeTime : 1500
    });

    能不能设置为

    $("#bodyPage").fullImages({
      ImgWidth: 100%, 
      ImgHeight: 100%,
      autoplay :  3500,
      fadeTime : 1500
    });
    回复
    zero 0
    2018/2/26 16:39:43
    想要播到最后一张停止 怎么做?
    回复
    叶志生 0
    2018/1/18 10:16:08

    怎么把它放到一个div里

    回复
    我。都想知道 0
    2017/8/23 18:21:21
    浚,..□ 0
    2017/8/22 16:28:44
    蓝色天空 0
    2017/5/23 14:59:07
    为什么第一张图片显示的时候第张二图片会在下面显示 但之后会消失 但每次轮播又会出现 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复