图片全屏自适应轮播

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

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


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

TicTic

tictic是创建子类标检的一个jQuery插件。也可用于网格背景或滑块的背景。
  背景
 11632  84

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

html5 canvas实现梦幻的3D刺猬球
  背景
 23315  71

漂亮的全屏Slideshow幻灯滑块效果(jQuery)

漂亮的全屏Slideshow幻灯滑块效果(jQuery)
  背景
 11890  92

jquery形象照片卷轴插件

jquery形象照片卷轴插件
  背景
 11293  51

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

    蓝色天空 0
    2017/5/23 14:59:07
    为什么第一张图片显示的时候第张二图片会在下面显示 但之后会消失 但每次轮播又会出现 回复
    蓝色天空 0
    2017/5/23 14:58:50
    为什么第一张图片显示的时候第张二图片会在下面显示 但之后会消失 但每次轮播又会出现 回复
    孟建军 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,不然会被覆盖
    回复
取消回复