图片全屏自适应轮播

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

 17203  97  查看评论 (12)
图片全屏自适应轮播 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  图片淡入时间


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

全屏背景图片

全屏背景图片简单好用
  背景
 15211  62

基于canvas的星空效果

基于canvas的星空粒子效果(代码注释全!)
  背景
 7990  32

jQuery颜色选择器ColorPicker

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

html5 canvas实现梦幻的3D刺猬球

html5 canvas实现梦幻的3D刺猬球
  背景
 20549  66

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币

    孟建军 0
    2016/12/13 12:12:19
    我不想全屏怎么弄
        想喝却怕喝醉的酒1
        2016/12/21 11:12:38

        在设置canvas大小函数里面,可以自己修改,

        如:canvas.width = 200;canvas.height = 200;

        想喝却怕喝醉的酒0
        2016/12/21 11:12:46

        抱歉,看错页了....不好意思(尴尬!!!!)

        luffy5210
        2016/12/22 16:12:19

        设置样式,同意一楼的说法

        SQLServerPLSQLEclipseVS1
        2016/12/23 17:12:25
        给他一定的容器宽高,要自适应的话请自行算高度
        1
        2016/12/27 11:12:46

        给盒子设置宽高,然后margin:auto

    回复
    q269015385 0
    2016/11/14 11:11:59
    喜欢!!
        惯性~给力0
        2017/3/22 14:23:06

        也是

    回复
    Cappuccino-Tiramisu 0
    2016/11/6 22:11:56
    丿随风 0
    2016/8/19 12:08:46
    很好,可是怎么在底部加上以小点的方式进行切换呢? 回复
    1205422106 0
    2016/8/9 11:08:42
    为什么在这个基础上,增加表单的话,表单随着轮播图一起变化却无法进行输入?
        一个小组工作室1
        2016/8/10 10:08:54
        因为这个轮播图片有设置z-index:1; 所以你的表单堆叠顺序应该设置大于1,不然会被覆盖
    回复
取消回复