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

图片全屏自适应轮播

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

 73483  459  查看评论 (23)
分享到微信朋友圈
X
图片全屏自适应轮播 ie兼容6
 查看演示  website  立即下载

调用方法

引入JS文件

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

HTML文件

1
2
3
4
5
<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

1
2
#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;}

调用方法

1
2
3
4
5
6
$("#bodyPage").fullImages({
   ImgWidth: 1920, 
   ImgHeight: 980,
   autoplay :  3500,
   fadeTime : 1500
});

说明：

  • ImgWidth : 1920  图片的宽度 

  • ImgHeight: 980   图片的高度

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

  • fadeTime : 1500  图片淡入时间


相关插件-背景,幻灯片和轮播图
查看更多

全屏背景滚动

 基于HTML5的炫酷个人网站模板
  背景
 78129  1083

基于canvas的星空效果

 基于canvas的星空粒子效果（代码注释全！）
  背景
 73420  406

京东产品详细页图片放大效果

 京东商城详细页产品图片列表以及放大镜效果 兼容ie6+,谷歌,火狐
  背景
 51414  500

jQuery颜色选择器ColorPicker

 ColorPicker基于强大的jQuery，使用方便、配置简单，同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中，兼容各大浏览器。
  背景
 73945  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
    怎么在这个基础上插入文字等 回复
    ＢeNｌz．. 0
    2018/9/17 19:56:11
    1
    2
    3
    4
    5
    6
    $("#bodyPage").fullImages({
      ImgWidth: 1920, 
      ImgHeight: 980,
      autoplay :  3500,
      fadeTime : 1500
    });

    能不能设置为

    1
    2
    3
    4
    5
    6
    $("#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
    为什么第一张图片显示的时候第张二图片会在下面显示 但之后会消失 但每次轮播又会出现 回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复