图片全屏自适应轮播

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

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


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

jquery动态背景过渡

创建动态背景的转换形式,一个简单而聪明的主意。 专注于文本字段看到这种效果。
  背景
 12493  52

jQuery单页/全屏滚动插件onepage-scorll

jQuery单页/全屏滚动插件onepage-scroll,支持垂直滚动外还支持横向滚动。
  背景
 16373  187

时间表(考勤表)插件imesheet.js

Timesheet.js是简单的javascript库HTML5和CSS3的考勤表。
  背景
 13741  36

背景视差插件Simplax

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

讨论这个项目(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,不然会被覆盖
    回复
取消回复