图片全屏自适应轮播

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

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


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

全屏背景图片

全屏背景图片简单好用
  背景
 12780  57

JQUERY网页背景幻灯片-BGSTRETCHER

今天我要给大家介绍的这款插件可以允许我们设置动态的背景图片,我们只需要准备一张大图或一组大图,bgStretcher 会自动让图片适应整个网页,并且循环背景图片。
  背景
 16133  53

js Bing登陆页面

landing.js是一个JavaScript库 用来创建简单的Bing API登陆页面
  背景
 16397  8

jquery形象照片卷轴插件

jquery形象照片卷轴插件
  背景
 8572  43

讨论这个项目(11)回答他人问题或分享插件使用方法奖励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
    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,不然会被覆盖
    回复
取消回复
    PROMULGATOR

    一个小组工作室

    广东省深圳市