图片全屏自适应轮播

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

 12365  70  查看评论 (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  图片淡入时间


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

背景分割视差效果

对背景进行分割特效
  背景
 1333  16

背景视差插件Simplax

Simplax用一个简单的方法来创建一个背景视差效果,只用几行javascript在你的网站。
  背景
 16906  59

多点触控插件Hammer.js

Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。
  背景
 64020  83

jQuery动态改变文字和背景颜色效果

jQuery动态改变文字和背景颜色效果
  背景
 11065  55

讨论这个项目(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

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

    一个小组工作室

    广东省深圳市